<!DOCTYPE html>
<!-- saved from url=(0030)# -->
<html lang="zh-CN">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>总觉得会忘了啥...</title>

	<meta name="keywords" content="javascript,css,html,nodejs,mongoDB,PHP,MySQL,swift">
	<meta name="description" content="iruxu&#39;s Notebook for web develope">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="renderer" content="webkit">
	<meta http-equiv="Cache-Control" content="no-transform">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<link rel="icon" type="image/x-icon" href="#image/favicon.ico?">
	<!--<base target="_blank">-->
	<base href="." target="_blank">
	<!--[if lt IE 9]>
<script src='https://apps.bdimg.com/libs/respond.js/1.4.2/respond.js?'></script>
<![endif]-->

	<link rel="stylesheet" href="../../lib/jquery/jquery-ui.css">
	<link rel="stylesheet" href="./monokai.css">
	<link rel="stylesheet" href="./style.min.css">
</head>

<body>
	<div class="snippet ui-draggable" id="snippet">
		<h6 class="ui-draggable-handle">iRuxu's Snippet Box </h6>
		<span class="close" id="closebox">×</span>
		<div class="box" id="box">
			<!-- some snippet will be show-->
		</div>
	</div>

	<div class="header">
		<a href="#" target="_self">
			<h1 title="iRuxu&#39;s notebook">5rit.xyz</h1>
		</a>
		<div class="nav" id="nav">
			<ul>
				<li class="on"><a href="javascript:void(0)">CSS</a></li>
				<li><a href="javascript:void(0)">jQuery</a></li>
				<li><a href="javascript:void(0)">Javascript</a></li>
				<li><a href="javascript:void(0)">HTML</a></li>
				<li><a href="javascript:void(0)">RegEXP</a></li>
				<!-- <li><a href="javascript:void(0)">Git常用命令</a></li> -->
				<li><a href="javascript:void(0)">Git常用命令</a></li>
			</ul>
		</div>
		<div id="showmenu"></div>
		<p class="contact">
			<a href="#">[ QQ:34347476 ]</a>
			<span style="background:#fff;border-radius:8px;padding:0 10px">
				<a href="https://weibo.com/"><img src="./sina.png" width="12px" alt="XD的微博"
						title="其实我没微博"></a>
				<a href="mailto:34347476@qq.com"><img src="./email.png" width="12px" alt="XD的电子邮件"
						title="email:34347476@qq.com"></a>
			</span>
			<br><a href="https://5rit.xyz">https://5rit.xyz</a>
		</p>
	</div>

	<div id="main" class="main">

		<div id="CSS" class="content">
			<div class="col">
				<div class="block">
					<h3>选择器<span>-</span></h3>
					<div class="contents">
						<h4>[<span>-</span>]规则</h4>
						<ul>
							<li>
								<a href="#">@charset</a><span style="left: 263px; top: 175px; display: none;">@charset
									"utf-8";
									<br>在外部样式表文件内使用。指定该样式表使用的字符编码。
									<br>该规则后面的分号是必需的，如果省略了此分号，会生成错误信息。</span>
							</li>
							<li><a href="#">@import</a><span
									style="left: 150px; top: 194px; display: none;">指定导入的外部样式表</span></li>
							<li><a href="https://labs.qianduan.net/css-selector/">selector</a><span
									style="left: 154px; top: 208px; display: none;">选择器支持一览.值得注意的是.class.class
									IE6并不识别</span></li>
							<li>
								<a href="#">选择器优先级</a>
								<span style="left: 160px; top: 240px; display: none;">1.三种引入方式的优先级
									<br>2.同引入方式内的基本原则：
									<br>一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。
									<br>复杂的计算方法：
									<br>●用1表示派生选择器(用HTML标签申明)的优先级
									<br>●用10表示类选择器(用一个样式类名申明)的优先级
									<br>●用100标示ID选择器(用DOM的ID申明)的优先级
									<br>●div.test1 .span var 优先级 1+10 +10 +1
									<br>●span#xxx .songs li 优先级1+100 + 10 + 1
									<br>●#xxx li 优先级 100 +1
									<br>3.Tips:样式在html中的先后顺序不决定样式优先级,由CSS中定义的先后和优先级有关 <a
										href="https://www.imooc.com/wenda/detail/218832">参考资料</a>
									<br>4.Tips:<a href="https://www.zhangxinxu.com/wordpress/?p=2286">选择器拾遗漏</a>
								</span>
							</li>
							<li><a href="#">!important</a><span
									style="left: 63px; top: 258px; display: none;">提升指定样式规则的应用优先权。
									<br>但在IE6中有BUG,需要分开写在2个选择符中
									<br>参考资料：<a href="https://css.doyoe.com/rules/!important.htm">GO TO!</a></span>
							</li>
							<li><a href="#">其他</a><span style="left: 169px; top: 290px; display: none;"><a
										href="https://keithclark.co.uk/articles/loading-css-without-blocking-render/">css延迟加载</a></span>
							</li>
						</ul>
						<h4>[<span>-</span>]HACK</h4>
						<ul>
							<li>
								<a href="#">if IE</a>
								<span style="left: 55px; top: 326px; display: none;">条件HACK
									<pre><code data-language="html" class="rainbow">
                    <span class="comment html">&lt;!--[if IE]&gt;
                    指定载入相关JS/CSS或其他文件
                    &lt;![endif]--&gt;</span>
                    </code></pre>
									<br>参考资料：<a href="https://css.doyoe.com/hack/conditions.htm">GO TO!</a></span>
							</li>
							<li>
								<a href="#">_property</a><span style="left: 169px; top: 339px; display: none;">属性级HACK
									<table>
										<tbody>
											<tr>
												<td>key: value\9;</td>
												<td>IE6~10</td>
											</tr>
											<tr>
												<td>key: value\0;</td>
												<td>Oprea+IE8~10</td>
											</tr>
											<tr>
												<td>.key: value;</td>
												<td>IE6+7+8</td>
											</tr>
											<tr>
												<td>*key: value;</td>
												<td>IE6+7 (+或#亦可)</td>
											</tr>
											<tr>
												<td>_key: value;</td>
												<td>IE6 (-亦可)</td>
											</tr>
											<tr>
												<td>[;property:value;];</td>
												<td>webkit(Chrome,Safari)</td>
											</tr>
											<tr>
												<td>@-moz-document url-prefix(){..}</td>
												<td>FireFox</td>
											</tr>
											<tr>
												<td>@media screen and (-webkit-min-device-pixel-ratio:0) {..}</td>
												<td>webkit(Chrome,Safari)</td>
											</tr>
										</tbody>
									</table>
									<br>参考资料1：<a href="https://css.doyoe.com/">GO TO!</a>
									<br>参考资料2：<a href="https://blog.csdn.net/freshlover/article/details/12132801">GO
										TO!</a>
									<br>参考资料3：<a href="https://tid.tenpay.com/?p=422">GO TO!</a>
								</span>
							</li>
							<li>
								<a href="#">*html selector</a><span>选择符级HACK
									<br> *html selector: IE6及以下
									<br> *+html selector : IE7
									<br><a href="https://blog.csdn.net/freshlover/article/details/12132801">结合选择器能力</a>
								</span>
							</li>
							<li><a href="#">expression</a><span
									style="left: 164px; top: 394px; display: none;">表达式，IE6-7支持，IE8不支持</span></li>
						</ul>
						<h4>[<span>-</span>]常用选择符</h4>
						<ul style="display: block;">
							<li><a href="#">*</a><span style="left: 154px; top: 440px; display: none;">通配符</span></li>
							<li><a href="#">tagName</a><span style="left: 96px; top: 454px; display: none;">元素标签名</span>
							</li>
							<li><a href="#">#id</a><span
									style="left: 145px; top: 475px; display: none;">#id选择器,也可以ele#id</span></li>
							<li><a href="#">.class</a><span
									style="left: 133px; top: 518px; display: none;">类选择器,可以连缀.class1.class2</span></li>
							<li><a href="#">E F</a><span style="left: 116px; top: 532px; display: none;">后代选择器</span>
							</li>
							<li><a href="#">E&gt;F</a><span>子选择器</span></li>
							<li><a href="#">E+F</a><span>相邻选择器</span></li>
							<li><a href="#">E~F</a><span>兄弟选择器</span></li>
						</ul>
						<h4>[<span>-</span>]伪类选择符</h4>
						<ul>
							<li>
								<a href="#">:link/:visited/:hover/:active</a><span>
									a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后（LVHA）
									<br>a:link{}
									<br>a:visited{}
									<br>a:hover{}
									<br>a:active{}
									<br>目前hover可用于任何元素,例如li:hover{},也可以用为li:hover a{}
									<br>IE6中:hover只对a元素有效,可通过JS控制
								</span>
							</li>
							<li><a href="#">:not</a>(selector)<span>匹配不含有s选择符的元素E</span></li>
							<li>
								<a href="#">:first-child</a>
								<span>:first-child 第一个子元素,前缀为被选元素,必须是第一个子元素而非第一个本类子元素
									<br>:first-of-type 该选择符总是能命中父元素的第1个为E的子元素，不论第1个子元素是否为E
								</span>
							</li>
							<li>
								<a href="#">:last-child</a>
								<span>:last-child 最后一个子元素
									<br>:last-of-type 最后一个此类元素</span></li>
							<li><a href="#">:nth-child(n)</a>
								<span>:nth-child(n) 第N个子元素
									<br>:nth-child(2n) 偶数,:nth-child(2n+1) 奇数
									<br>第N个子元素，如果有不同类别的其他同级标签元素亦会增长序列数
									<br>:nth-of-type(n) 第N个此类子元素
								</span>
							</li>
							<li>
								<a href="#">:only-child</a>
								<span>:only-child 唯一一个子元素
									<br>:only-of-type 为父元素中唯一元素的此类元素
								</span></li>
							<li><a
									href="#">:focus</a><span>设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。<br>webkit内核浏览器会默认给:focus状态的元素加上outline的样式,设置:focus{outline:0}<br></span>
							</li>
							<li><a href="#">:empty</a><span>匹配没有任何子元素（包括text节点）的元素E。</span></li>
							<li><a href="#">:target</a><span>匹配相关URL指向的HASH目标元素。</span>
							</li>
						</ul>
						<h4>[<span>-</span>]属性选择符</h4>
						<ul>
							<li><a href="#">[att]</a><span>含有属性</span></li>
							<li><a href="#">[att='val']</a><span>属性值为指定</span></li>
							<li><a
									href="#">[att~='val']</a><span>选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。完整包含,而非字符串。</span>
							</li>
							<li><a href="#">[att^='val']</a><span>属性值以..开头</span></li>
							<li><a href="#">[att$='val']</a><span>属性值以..结尾</span></li>
							<li><a href="#">[att*='val']</a><span>属性值包含..字符串</span></li>
							<li><a href="#">[att|='val']</a><span>属性值以val开头并用连接符"-"分隔的字符串的元素</span></li>
						</ul>
						<h4>[<span>-</span>]其他选择符</h4>
						<ul>
							<li><a href="#">:lang(zh-cn)</a><span>匹配使用特殊语言的E元素。</span></li>
							<li><a href="#">:root</a><span>匹配E元素在文档的根元素。在HTML中，根元素永远是HTML</span></li>
							<li><a href="#">:checked</a><span>匹配用户界面上处于选中状态的元素E。(用于input
									type为radio与checkbox时)，不包含下拉菜单</span></li>
							<li><a href="#">:enabled</a><span>匹配用户界面上处于可用状态的元素E。</span></li>
							<li><a href="#">:disabled</a><span>匹配用户界面上处于禁用状态的元素E。</span></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="col">
				<div class="block">
					<h3>文本<span>-</span></h3>
					<div class="contents">
						<h4>[<span>-</span>]字体</h4>
						<ul>
							<li><a href="#">font</a>([i b]size/lh family)<span>【简写】font:italic bold 18px/22px 'Consolas'
									（简写时font-size和font-family属性不可省略）顺序不对则有可能出现BUG</span></li>
							<li><a href="#">font-size</a>(px/180%)<span style="left: 365px; top: 194px; display: none;">
									字体大小,浏览器默认大小为1em（一般为16px）,移动端则使用rem,PC端使用px。
									<br>% : 页面元素中font-size使用百分比时，其百分比取值是基于父对象中字体的尺寸，不允许简写百分比。字体没有相对父盒子大小比例扩展算法。
									<br>px : 像素,相对长度单位。1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px;
									<br>em : 相对长度单位.相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 <a
										href="https://pxtoem.com/">PX转EM快速工具</a>
									<br>rem : 相对长度单位。相对于根元素(即html元素)font-size计算值的倍数。设置字体html{font-size:62.5% =
									10px},则1.2rem=12px（手机端HTML5元素不主动继承body字体大小时，使用*）
									<br>vm : 视窗可用宽度,0～100.(除去滚动条)
								</span></li>
							<li><a href="#">line-height</a>(px/180%/1.8)
								<span>
									行高,可为百分比或乘积因子,具有继承性<br>
									% : 当为百分比时，子级会继承父级，此时的百分比，基于父级的字体大小的百分比，可能发生重叠（不具动画性）。<a
										href="https://css.doyoe.com/properties/text/line-height.htm">参考资料</a><br>
									1.5 : 当为乘积因子时，以自身的百分比150%=1.5。<br>
									<hr>
									扩展阅读：<br>
									<a
										href="https://wenku.baidu.com/link?url=ATB30qF4Lv0JoYBgX64D7tj1jm1w77G-QC5A6tA22YYSn409R5Q-CcT1QIPGb-x8vxcGnfZ6F4T-1gTCJgbgQpkX8Bp3JaziAWIksWFlH1i">linebox模型与基线等</a>
									|
									<a href="https://www.zhangxinxu.com/wordpress/?p=384">行高的深入理解</a>
									<hr>
									兼容处理：<br>
									1.在FF中的对齐规则BUG，<a
										href="https://blog.sina.com.cn/s/blog_50ba480e0100u7np.html">解决方案</a>使用FF专属HACK@-moz-document
									url-prefix(){some-style}<br>
									2.使用乘积因子时，IE7对1处理不当，需设置1.1或避免设置为字符等高。
								</span>
							</li>
							<li><a
									href="#">font-weight</a>(bold/normal)<span>粗体,normal正常=400,bold粗体=700,取值100~900</span>
							</li>
							<li><a href="#">font-style</a>(italic/normal)<span>normal正常,italic字体自带斜体,oblique人为斜体</span>
							</li>
							<li><a href="#">font-variant</a>(small-caps)<span>normal正常的字体,small-caps小型的大写字母字体</span>
							</li>
							<li><a href="#">font-family</a>
								<span>按优先顺序排列。以逗号隔开。如果字体名称包含空格或中文，则应使用引号括起。<br>常用字体：Helvetica,Verdana,Arial,Consolas,Georgia,Impact,Trebuchet
									MS,Comic Sans MS,Tahoma,Time News Roman,微软雅黑,宋体
									<br>参考<a href="https://cssfontstack.com/">常用字体预览</a>
									<br>移动端字体设置font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; <a
										href="https://github.com/AlloyTeam/Mars/blob/master/solutions/font-family.md">参考资料</a>
								</span></li>
							<li><a href="#">@font-face</a>{f:'n',src:'url'}
								<span><b>@font-face 必须在字体使用前引入</b>
									<br>@font-face {
									<br> font-family: 'diyfont';
									<br> src: url('diyfont.eot'); /* IE9+ */
									<br> src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
									<br> url('diyfont.woff') format('woff'), /* chrome、firefox */
									<br> url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android,
									iOS 4.2+*/
									<br> url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
									<br>}
									<br>.iconfont{
									<br> font-family:"iconfont";
									<br> font-style:normal;
									<br> display:block/inline-block;
									<br> -webkit-font-smoothing: antialiased;
									<br> -webkit-text-stroke-width: 0.2px;
									<br>}
									<br>放在html中时写为“&amp; #xe62a;”赋值以对应class,当为伪元素content引用时,赋值“\e62a”
									<br>图标字体 <a href="https://iconfont.cn/repositories/10">alibaba</a> / <a
										href="https://www.w3cschool.cc/try/demo_source/bootstrap-glyph-customization.htm">Glyphicons
									</a> / <a href="https://icomoon.io/app/#select">icomoon</a>
									<br>更多字体 <a href="https://zh.fonts2u.com/index.html">Get it!</a>
									<br>字体转换 <a
										href="https://www.fontsquirrel.com/tools/webfont-generator">将一种字体转为网页所需的所有格式</a>
								</span></li>
						</ul>
						<h4>[<span>-</span>]文本属性</h4>
						<ul>
							<li><a href="#">text-align</a>(l/r/c/j)<span>
									水平对齐:center居中,left左,right右,justify两端对齐
									<br>对inline/inline-block元素均有效,在IE6-7下对block也有效
									<br>在父级设置,让子级中内联(块)元素水平居中对齐父级
								</span></li>
							<li><a href="#">vertical-align</a>(t/b/m)<span>
									垂直对齐：
									<table width="100%" cellspacing="1" cellpadding="0">
										<tbody>
											<tr>
												<td>长度</td>
												<td>通过距离升高（正值）或降低（负值）元素。<code>'0cm'</code>等同于<code>'baseline'</code>
												</td>
											</tr>
											<tr>
												<td>百分值 – %</td>
												<td>通过距离（相对于line-height值的百分大小）升高（正值）或降低（负值）元素。<code>'0%'</code>等同于<code>'baseline'</code>
												</td>
											</tr>
											<tr>
												<td>baseline</td>
												<td>默认。元素的基线与父元素的基线对齐。</td>
											</tr>
											<tr>
												<td>sub</td>
												<td>降低元素的基线到父元素合适的下标位置。</td>
											</tr>
											<tr>
												<td>super</td>
												<td>升高元素的基线到父元素合适的上标位置。</td>
											</tr>
											<tr>
												<td>top</td>
												<td>把对齐的子元素的顶端与line box顶端对齐。</td>
											</tr>
											<tr>
												<td>text-top</td>
												<td>把元素的顶端与父元素内容区域的顶端对齐。</td>
											</tr>
											<tr>
												<td>middle</td>
												<td>元素的中垂点与 父元素的基线加1/2父元素中字母x的高度 对齐。</td>
											</tr>
											<tr>
												<td>bottom</td>
												<td>把对齐的子元素的底端与line box底端对齐(受line-height影响)【line-box底端】。</td>
											</tr>
											<tr>
												<td>text-bottom</td>
												<td>把元素的底端与父元素内容区域的底端对齐。【content-area底端】</td>
											</tr>
											<tr>
												<td>inherit</td>
												<td>采用父元素相关属性的相同的指定值。</td>
											</tr>
										</tbody>
									</table>
									<br>对inline/inline-block元素有效,例如默认的图片,表单控件
									<br>在子级设置,让自身与同级元素垂直对齐,而非对子集!
									<br><a href="https://www.zhangxinxu.com/wordpress/?p=813">参考资料</a>
								</span></li>
							<li><a href="#">text-indent</a>([+-]Npx)<span>
									缩进,可为负值.
									<br>div内部的第一行及每个强制换行的首行都拥有2em的缩进：text-indent:2em each-line;【CSS3】
									<br>技巧：对于要保留html文字,但不显示的文字,可设置text-indent:-999px/100%【SEO】
									<br>对内联a应用text-indent无效,需将a设置为block/inline-block
								</span></li>
							<li><a href="#">:first-letter</a><span>对象内第一个字符<br>选择符与包含规则的花括号之间不能紧挨着，需留有空格或换行。<br>例
									p:first-letter[_]{} （[_]处保留空格）</span></li>
							<li><a href="#">:first-line</a><span>对象内第一行<br>选择符与包含规则的花括号之间不能紧挨着，需留有空格或换行</span></li>
							<li><a href="#">letter-spacing</a>(Npx)<span>字母/中文字间隔</span></li>
							<li><a href="#">word-spacing</a>(Npx)<span>单词间隔</span></li>
						</ul>
						<h4>[<span>-</span>]文本样式</h4>
						<ul>
							<li><a href="#">text-transform</a>(c/u/l)
								<span>none： 无转换
									<br>capitalize： 将每个单词的第一个字母转换成大写
									<br>uppercase： 将每个单词转换成大写
									<br>lowercase： 将每个单词转换成小写 </span></li>
							<li><a href="#">text-decoration</a>(n/u/o/t)<span>none：无
									<br>underline：下划线
									<br>overline：上划线
									<br>line-through：删除线</span></li>
							<li><a href="#">text-shadow</a>(1px 1px 2px #248)<span>文本阴影:1px 1px 5px #000;
									（水平,垂直,模糊半径,颜色）<br>在线生成3DCSS文字<a href="https://tool.uixsj.cn/3d-css/">GO
										TO!</a></span></li>
							<li><a
									href="#">::selection</a><span>对象被选择时的样式,必须使用双冒号【CSS】<br>::selection只能定义被选择时的background-color及color</span>
							</li>
							<li><a href="#">-webkit-text-fill-color</a>
								<span>
									文字的填充颜色,默认值transparent <br>
									<a href="https://www.zhangxinxu.com/wordpress/2015/03/css3-colorful-text/">彩条文字</a>
									<pre><code data-language="css" class="rainbow">
<span class="support css-property">line-height</span>: <span class="constant numeric">20</span><span class="keyword unit">px</span>;
<span class="support css-property"><span class="support vendor-prefix">-webkit-</span>background-clip</span>: <span class="support css-value">text</span>;
<span class="support css-property"><span class="support vendor-prefix">-webkit-</span>text-fill-color</span>: <span class="support css-value">transparent</span>;
<span class="support css-property">background-image</span>: <span class="support css-value">linear-gradient</span>( to bottom, <span class="constant hex-color">#9588DD</span>, <span class="constant hex-color">#9588DD</span> <span class="constant numeric">25</span><span class="keyword unit">%</span>, <span class="constant hex-color">#DD88C8</span> <span class="constant numeric">25</span><span class="keyword unit">%</span>, <span class="constant hex-color">#DD88C8</span> <span class="constant numeric">50</span><span class="keyword unit">%</span>, <span class="constant hex-color">#D3DD88</span> <span class="constant numeric">50</span><span class="keyword unit">%</span>, <span class="constant hex-color">#D3DD88</span> <span class="constant numeric">75</span><span class="keyword unit">%</span>, <span class="constant hex-color">#88B0DD</span> <span class="constant numeric">75</span><span class="keyword unit">%</span>, <span class="constant hex-color">#88B0DD</span>);
<span class="support css-property">background-size</span>: <span class="constant numeric">100</span><span class="keyword unit">%</span> <span class="constant numeric">80</span><span class="keyword unit">px</span>;
						</code></pre>
								</span>
							</li>
							<li><a href="#">-webkit-text-stroke</a><span>文字的描边,1px #ff3399</span></li>
							<li><a href="#">-webkit-text-stroke-width</a><span>文字描边厚度</span></li>
							<li><a href="#">-webkit-text-stroke-color</a><span>文字描边颜色</span></li>
						</ul>
						<h4>[<span>-</span>]文本折行</h4>
						<ul>
							<li><a href="#">white-space</a>(Npx)
								<span>normal：默认处理方式。
									<br>nowrap： 强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象。
									<br>常用片段（设置宽度）：white-space:nowrap;text-overflow:ellipsis;overflow:hidden;</span>
							</li>
							<li><a href="#">text-overflow</a>(ellipsis/str)<span>文本溢出:clip剪裁掉/ellipsis点点点/string指定字符串【CSS3】<br>
									<a
										href="https://www.zhangxinxu.com/wordpress/2014/04/%E8%87%AA%E9%80%82%E5%BA%94%E8%A1%A8%E6%A0%BC-%E5%AD%97%E7%AC%A6%E6%8D%A2%E8%A1%8C-%E6%BA%A2%E5%87%BA%E7%82%B9%E7%82%B9%E7%82%B9-table-text-overflow-ellipsis-word-wrap-break-all/">多行文本省略(webkit)</a>
									display: -webkit-box; /* height: 36px; line-height: 18px; */ -webkit-line-clamp: 2;
									-webkit-box-orient: vertical; overflow: hidden;
								</span></li>
							<li><a href="#">word-wrap</a><span>当内容超过指定容器的边界时是否断行
									<br>normal：允许内容顶开或溢出指定的容器边界。
									<br>break-word：内容将在边界内换行。如果需要，单词内部允许断行。
									<br>断行控制片段word-wrap: break-word;word-break: break-all;</span></li>
							<li><a href="#">word-break</a><span>对象内文本的字内换行行为
									normal：依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。
									<br>keep-all：与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本。
									<br>break-all：该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本，比如使连续的英文字母间断行。
								</span></li>
						</ul>
						<h4>[<span>-</span>]文本流</h4>
						<ul>
							<li><a href="#">unicode-bidi</a>(bidi-override)<span>
									normal：对象不打开附加的嵌入层，对于内联元素，隐式重排序跨对象边界进行工作。
									<br>embed：对象打开附加的嵌入层，direction属性的值指定嵌入层，在对象内部进行隐式重排序。
									<hr>bidi-override：严格按照direction属性的值重排序。忽略隐式双向运算规则。
									<br>用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用
								</span></li>
							<li><a href="#">direction</a>(ltr/rtl)
								<span>ltr：文本流从左到右。
									<br>rtl：文本流从右到左。
									<br>设置direction:rtl;unicode-bidi:bidi-override;实现古文排字效果</span></li>
							<li><a href="#">writing-mode</a><span>书写模式
									<br>horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom（类似IE私有值lr-tb）
									<br>lr-tb：左-右，上-下。对象中的内容在水平方向上从左向右流入，后一行在前一行的下面。 所有的字形都是竖直向上的。这种布局是罗马语系使用的（IE）
									<hr>vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left（类似IE私有值tb-rl）
									<br>vertical-lr：垂直方向自左而右的书写方式。即 top-bottom-left-right
									<br>tb-rl：上-下，右-左。对象中的内容在垂直方向上从上向下流入，自右向左。后一竖行在前一竖行的左面。全角字符是竖直向上的，半角字符如拉丁字母或片假名顺时针旋转90度
									<br></span></li>
						</ul>
						<h4>[<span>-</span>]内容</h4>
						<ul>
							<li><a href="#">:before</a>
								<span>设置在对象前（依据对象树的逻辑结构）发生的内容。IE6-7不支持,IE8支持。
									<br>用来和content属性一起使用，并且必须定义content属性！必要时候即使有block表现仍需定义宽度
									<br>伪元素的位置在内容之后，如果内容为空，则在起点，即使指定了父级尺寸</span></li>
							<li><a href="#">:after</a>
								<span>设置在对象后（依据对象树的逻辑结构）发生的内容。IE6-7不支持,IE8支持。
									<br>用来和content属性一起使用，并且必须定义content属性！必要时候即使有block表现仍需定义宽度</span></li>
							<li><a href="#">content</a>(str/attr/url/count)
								<span>
									content:'str' 一个字符串或符号,需加引号,例如 '»'
									<br>content:attr(标签名) 载入此标签的一个属性节点上的内容,例如title
									<br>content:url('文件地址') 使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源）
									<br>content:counter(name,list-style-type)使用一个已命名的计数器
									<br>参考资料：<a href="https://www.w3cfuns.com/article-5592215-1-1.html">GO TO!</a>
								</span></li>
							<li><a href="#">counter-increment</a>(name [N])
								<span>
									定义一个计数器,并设定累加值,默认为1,可以为负值。
									<br>在要计数的对象上设置 li{counter-increment:test 1}
									<br>在起始伪对象上启用 li:before{content:counter(test)'.'}
									<br>参考资料：<a href="https://css.doyoe.com/properties/content/counter-increment.htm">GO
										TO!</a>
									<br>实例演示：<a href="https://www.w3cfuns.com/article-5592152-1-1.html">GO TO!</a>
								</span></li>
							<li><a href="#">counter-reset</a>(name [N])
								<span>
									复位计数器,默认为0.
									<br>在要复位的对象(伪元素)上设置 li:before{counter-reset:test -1}
									<br>参考资料：<a href="https://css.doyoe.com/properties/content/counter-reset.htm">GO
										TO!</a>
									<br>复杂嵌套：<a href="https://www.w3cfuns.com/article-5592229-1-1.html">GO TO!</a>
									<br>嵌套原理：
									<br>1级列表设置计数器1,1级列表的before伪元素启用计数器1
									<br>2级列表设置2计数器2,2级列表的before伪元素启用计数器2
									<br>1级列表设置清空计数器
								</span></li>
							<li><a href="#">quotes</a>('['*4)
								<span>
									设置或检索对象内使用的嵌套标记。
									<br>设置标签的包围符号：q{quotes:'外层左标记' '外层右标记' '内层左标记' '内层右标记'}
									<br>参考资料：<a href="https://css.doyoe.com/properties/content/quotes.htm">GO TO!</a>
								</span></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="col">
				<div class="block">
					<h3>样式<span>-</span></h3>
					<div class="contents">
						<h4>[<span>-</span>]样式</h4>
						<ul>
							<li>
								<a href="#">box-shadow</a>
								<span>盒子阴影,box-shadow:2px 2px 5px 50px #000 inset
									<br>水平,垂直,模糊半径,阴影大小,颜色,内阴影
									<br>可用逗号分隔多个阴影,制作复杂重叠阴影效果
									<br>投影制作：<a href="https://css3-drop-shadows.herokuapp.com/app">GO TO!</a>
									<br>长阴影：<a href="https://iruxu.com/to-be-css/shadow_longshadows.html">GO TO!</a>
									<br>投影彩带：<a href="https://www.css3d.net/ribbon-generator/">GO TO!</a>
								</span>
							</li>
							<li>
								<a href="#">-webkit-box-reflect</a>
								<span style="left: 624px; top: 195px; display: none;">-webkit-box-reflect:none/direction
									offset mask
									<br>可应用于盒子或者直接应用于图片
									<br>direction(倒影方向): above / below / left / right
									<br>offset(倒影与源间隔): length / %
									<br>mask(蒙版): url() / gradient
								</span>
							</li>
							<li>
								(new)<a href="#">filter</a>
								<span>ele {filter: none | <filter-function>* }
										<br>函数不传值,默认为100%=1完全渲染,多个函数之间用空格隔开
										<br>grayscale() 灰度，黑白
										<br>sepia() 褐色,黄褐色旧照片
										<br>saturate() 饱和度
										<br>hue-rotate() 色相旋转
										<br>invert() 反色
										<br>opacity() 透明度
										<br>brightness() 亮度
										<br>contrast() 对比度
										<br>blur(3px) 模糊
										<br>drop-shadow(5px 5px 5px #ccc) 阴影
										<br><a href="https://www.w3cplus.com/css3/ten-effects-with-css3-filter">参考资料</a>
										<a
											href="https://www.zhangxinxu.com/wordpress/2013/11/%E5%B0%8Ftip-%E4%BD%BF%E7%94%A8css%E5%B0%86%E5%9B%BE%E7%89%87%E8%BD%AC%E6%8D%A2%E6%88%90%E6%A8%A1%E7%B3%8A%E6%AF%9B%E7%8E%BB%E7%92%83%E6%95%88%E6%9E%9C/">示例</a>
									</filter-function></span>
							</li>
						</ul>
						<h4>[<span>-</span>]颜色</h4>
						<ul>
							<li>
								<a href="#">color</a>
								<span>1.颜色:red(颜色名称),#ff3399(16进制),rgb(255,0,255)
									<hr>2.transparent
									<br>IE6及更早浏览器(CSS1)只有background-color接受transparent取值。
									<br>IE7及IE8(CSS2)除了background-color，还有border-color也开始接受transparent取值。
									<br>在CSS3中，transparent被延伸到任何一个有color值的属性上。
									<br>*IE8及以下，color属性值为transparent时，文本显示为黑色。
									<br>IE6透明边框的处理
									<br>
									<pre><code data-language="css" class="rainbow">
                    <span class="support css-property">_border-color</span>: <span class="constant hex-color">#000000</span>; 
                    <span class="support css-property">_filter</span>: ~<span class="string">"progid:DXImageTransform.Microsoft.Chroma(color='#000000')"</span>;
                    </code></pre>
									<hr>3.rgba(255,255,255,0.8)
									<br>带Alpha通道的颜色模式,可以半透明（IE8-不支持）
									<br>让IE8-通过IE滤镜来实现rgba效果
									<br>
									<pre><code data-language="css" class="rainbow">
                    <span class="support css-property">background</span>: <span class="support css-value">rgba</span>(<span class="constant numeric">0</span>,<span class="constant numeric">0</span>,<span class="constant numeric">0</span>,.<span class="constant numeric">92</span>);
                    <span class="support css-property">filter</span>:<span class="support css-value">progid</span>:<span class="support css-value">DXImageTransform</span>.Microsoft.gradient(enabled=<span class="string">'true'</span>, <span class="support css-value">startColorstr</span>=#CC<span class="constant numeric">000000</span>, <span class="support css-value">endColorstr</span>=#CC<span class="constant numeric">000000</span>);
                    </code></pre>
									<br>扩展知识：DXImageTransform.Microsoft.gradient 滤镜里的 startColorstr 参数值是 #AARRGGBB 形式的，
									其中的AA是代表不透明度的十六进制，00表示完全透明，FF就是全不透明，化成十进制的范围就是0~255，剩下的 RRGGBB 就是颜色的十六进制代码。
									<br>举例如：background: rgba(125, 0, 0, .3);
									表示的是30%不透明度的红色背景。把30%的不透明度转换成十六制呢的方法如下：先计算#AA的的十进制x，x/255 =
									3/10，解得x=3*255/10，然后再把x换算成十六进制，约等于4C。
									<hr>4.hsl，h色环角度,s饱和度,l亮度 <a href="https://www.paletton.com/">Paletton.com</a>
								</span>
							</li>
							<li><a href="#">currentColor</a><span>
									让Border/backgroud等沿袭color的颜色<br>
									<a
										href="https://www.zhangxinxu.com/wordpress/2014/10/currentcolor-css3-powerful-css-keyword/">参考资料</a>
								</span>
							</li>
							<li><a href="#">opacity</a>
								<span>透明度：使用浮点数指定对象的不透明度。值被约束在[0.0-1.0]范围内，如果超过了这个范围，其计算结果将截取到与之最相近的值。
									<br>注意如果父级应用了此透明度方法,则子元素也会跟随一起透明,不受影响可以将子元素写在外面,再通过负值的margin或其他定位方法定位.
									<br>IE8-不支持此属性,但可以用IE滤镜来处理,片段
									<br>
									<pre><code data-language="css" class="rainbow">
                    <span class="entity name class">.tm</span>(@<span class="entity name tag">tm</span>){
                    @<span class="support css-property">alpha</span>:@tm*<span class="constant numeric">100</span>;
                    <span class="support css-property">opacity</span>:@tm;
                    <span class="support css-property">filter</span>:<span class="support css-value">alpha</span>(opacity=@alpha);
                    }
                    </code></pre>
								</span>
							</li>
							<li>
								(ie)<a href="#">filter</a>
								<span>IE特有的滤镜属性,配合上述实现透明颜色,透明区块,另外由于IE无法正常显示PNG透明图片,当图片用作为背景图时,同样可以使用本属性解决.
									<br>
									<pre><code data-language="css" class="rainbow">
                    <span class="support css-property">background</span>:<span class="support css-value">url</span>(<span class="string">'../images/ex.png'</span>) no-repeat;
                    <span class="support css-property">_filter</span>:<span class="support css-value">progid</span>:<span class="support css-value">DXImageTransform</span>.Microsoft.AlphaImageLoader(src=<span class="string">"images/ex.png"</span>);
                    </code></pre>
									<br><b>*注意</b>:通过滤镜对引入图片，滤镜引入图片的时候是相对于HTML文件，而不是相对于CSS文件，建议引入绝对路径。此方法不能应用于平铺图像！
									<br>完整参考文档：<a href="https://www.w3cfuns.com/thread-297-1-1.html">GO TO!</a>
									<br>IE6使用滤镜PNG图片透明后，容器内链接失效，设置a{_position:relative;}
									<br><a
										href="https://www.qianduan.net/guan-yu-ie-zhong-css-filter-lv-jing-xiao-zhi-shi/">扩展资料</a>
									<br><br>
									ie filter滤镜的说明：<br>
									1.ie9滤镜重叠，给定统一class在条件注释中取消ie9滤镜。<br>
									2.z-index与filter的渲染冲突bug。<a
										href="https://www.cnblogs.com/iruxu/p/4604274.html">详情</a><br>
									3.ie8中对img包裹元素a滤镜失效需要设置在img上。
								</span>
							</li>
						</ul>
						<h4>[<span>-</span>]背景</h4>
						<ul>
							<li>
								<a href="#">background</a>
								<span>[简写]background:#222 url() Xpx Ypx/size repeat attachment clip origin,...
									<br>逗号隔开每组background的缩写值；如果有size值，需要紧跟position并且用"/"隔开；
									<br>分解写法时，background-color只能设置一个。
									<br>缩写时,如果前面设置了独立属性,在缩写中未被定义的会被覆盖会空或默认值,如果在后面补充了的,后面的属性会自动合并到缩写中,如果该属性不被支持,则造成整个缩写属性无法识别！因根据情况全部分开写。
									<a href="https://www.internetke.com/jsEffects/2014120803/">CSS3渐变背景代码生成工具</a>
								</span></li>
							<li><a href="#">background-color</a><span>背景颜色,可用rgba来设置半透明背景,而不是用opacity,制作一些遮罩效果</span>
							</li>
							<li><a href="#">background-position</a><span>背景图的位置,可以为负值和百分比,也可以用left(x=0),right(x=100%),top(y=100%),bottom(y=100%).先写水平,后写垂直.背景图的50%居中以图形中心为基点，不需要再移动自身一半尺寸
									<br>雪碧图：<a href="https://www.99css.com/archives/1524">CSS GAGA</a>
									<br>BASE64编码：<a href="https://www.fishlee.net/Tools/GetImageBase64Code">GO
										TO!</a></span>
							</li>
							<li><a href="#">background-size</a><span>
									background-size: Xpx Ypx / A% B% / cover / contain / auto
									<br>cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；【全兼容的方式,独立图层img～100%】
									<br>contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。
									<br>x% y%：百分比大小，占满父元素空间的百分比，可能导致图片变形
									<br>x% auto | auto y%：使元素占父元素宽/高的百分比，并等比缩放～！
									<br>一些情况不能识别/，反编译时候只需要反编译值，而不包括属性！
								</span>
							</li>
							<li>
								<a href="#">background-repeat</a><span>平铺方式：
									<br>repeat-x：背景图像在横向上平铺
									<br>repeat-y：背景图像在纵向上平铺
									<br>repeat：背景图像在横向和纵向平铺
									<br>no-repeat：背景图像不平铺
									<br>round：背景图像自动缩放直到适应且填充满整个容器。
									<br>IE6不指定此属性时，默认不平铺，其他浏览器默认平铺</span></li>
							<li><a href="#">background-attachment</a><span>
									fixed【相对浏览器固定】背景图像相对于窗体固定。
									<br>scroll【相对元素固定】背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
									<br>local【相对元素内容固定】背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。
								</span>
							</li>
							<li>
								<a href="#">background-clip</a>
								<span>padding-box：从padding区域（不含padding）开始向外裁剪背景。
									<br>border-box：从border区域（不含border）开始向外裁剪背景。(默认)
									<br>content-box：从content区域开始向外裁剪背景。
									<br>text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。
									<br>TEXT剪裁方式的遮罩效果：<a
										href="https://www.zhangxinxu.com/study/201006/text-fill-color-mask-text-demo.html">GO
										TO!</a>
								</span>
							</li>
							<li>
								<a href="#">background-origin</a>
								<span>padding-box：从padding区域（含padding）开始显示背景图像。(默认)
									<br>border-box：从border区域（含border）开始显示背景图像。
									<br>content-box：从content区域开始显示背景图像。
								</span>
							</li>
							<li><a href="#">background-image</a><span>图像url(''),无none,渐变</span></li>
							<li>
								<a href="#"></a>grandient tools
								<span>图片渐变获取：<a href="https://www.gradient-scanner.com/">从图片读取渐变生成CSS</a>
									<br>仿PS渐变生成：<a href="https://www.colorzilla.com/gradient-editor/">GO TO!</a>
									<br>渐变按钮生成：<a href="https://www.cssbuttongenerator.com/">简洁</a> /
									<a href="https://www.glassybuttons.com/glassy.php">玻璃</a> / <a
										href="https://jirox.net/AsButtonGen/">水晶</a> / <a
										href="https://www.bestcssbuttongenerator.com/">简单</a> / <a
										href="https://www.cssbutton.me/browse">质感</a></span>
							</li>
							<li>
								[img]<a href="#">linear-grandient()</a>
								<span>background:linear-gradient(point,#colorA lengthA/A%,……#colorB lengthB/B%) 线性渐变
									<br>point:left/right/top/bottom/N deg 方向或角度
									<br>默认以垂直上方点为0度向下
									<br>技巧应用实例：
									<br>
									<pre><code data-language="css" class="rainbow">
                    使用<span class="constant numeric">1</span>像素背景渐变绘制分割线
                    <span class="comment">/*使用伪元素制作导航列表项分隔线*/</span>
                    <span class="entity name class">.nav</span> <span class="entity name tag">li</span><span class="entity name pseudo">:after</span>{
                    <span class="support css-property">content</span>:<span class="string">""</span>; 
                    <span class="support css-property">width</span>:<span class="constant numeric">1</span><span class="keyword unit">px</span>;
                    <span class="support css-property">height</span>:<span class="constant numeric">15</span><span class="keyword unit">px</span>;
                    <span class="support css-property">position</span>:<span class="support css-value">absolute</span>;
                    <span class="support css-property">right</span>:<span class="constant numeric">0</span>;
                    <span class="support css-property">top</span>:<span class="constant numeric">20</span><span class="keyword unit">px</span>;
                    <span class="support css-property">background</span>:<span class="support css-value">linear-gradient</span>(<span class="constant numeric">0</span>deg,<span class="constant hex-color">#990000</span>,<span class="constant hex-color">#ff0000</span>,<span class="constant hex-color">#990000</span>);
                    }
                    <span class="comment">/*删除第一项和最后一项导航分隔线*/</span>
                    <span class="entity name class">.nav</span> <span class="entity name tag">li</span><span class="entity name pseudo">:last-child</span><span class="entity name pseudo">:after</span>{
                    <span class="support css-property">width</span>:<span class="constant numeric">0</span>;
                    <span class="support css-property">height</span>:<span class="constant numeric">0</span>;
                    }
                    </code></pre>
								</span>
							</li>
							<li>[img]<a href="#">repeating-linear-gradient()</a></li>
							<li>[img]<a href="#">radial-grandient()</a>
								<span>
									background:radial-gradient(position,shape,#colorA lengthA/A%,……#colorB
									lengthB/B%)径向渐变
									<br>position:left~center/lengthA lengthB/A% 5% 指定圆心位置
									<br>shape:ellipse/circle形状
									<br>可以使用rgba色，设置从透明到渐变效果！
								</span>
							</li>
							<li>[img]<a href="#">repeating-radial-gradient()</a></li>
						</ul>
					</div>
				</div>
				<div class="block">
					<h3>界面<span>-</span></h3>
					<div class="contents">
						<h4>[<span>-</span>]用户界面</h4>
						<ul>
							<li>
								<a href="#">cursor</a>
								<span>设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
									<br>格式：使用自定义图像作为光标类型，IE, Opera只支持*.cur等特定的图片格式；Firefox, Chrome,
									Safari既支持特定图片类型也支持常见的*.jpg, *.gif, *.jpg等图片格式。
									<br>兼容：cursor的属性值可以是一个序列,用逗号分隔地址,优先级递降。
									<br>
									<pre><code data-language="css" class="rainbow">
                    示例代码：
                    <span class="entity name pseudo">:link</span>,<span class="entity name pseudo">:visited</span>{
                    <span class="support css-property">cursor</span>:<span class="support css-value">url</span>(example.svg#linkcursor),
                          <span class="support css-value">url</span>(hyper.cur),
                          <span class="support css-value">url</span>(hyper.png) <span class="constant numeric">2</span> <span class="constant numeric">3</span>,
                          <span class="support css-value">pointer</span>;
                    }
                    本例用来给所有的超链接定义光标类型，客户端如果不支持SVG类型的光标，则使用下个<span class="string">"hyper.cur"</span>；如果cur类型也不支持，则使用下个<span class="string">"hyper.png"</span>；依次类推。
                    </code></pre>
									<br>附录：
									<table width="95%">
										<tbody>
											<tr>
												<th>值</th>
												<th>描述</th>
											</tr>
											<tr>
												<td><i>url</i></td>
												<td>需使用的自定义光标的 URL。
													注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。</td>
											</tr>
											<tr>
												<td>default</td>
												<td>默认光标（通常是一个箭头）</td>
											</tr>
											<tr>
												<td>auto</td>
												<td>默认。浏览器设置的光标。</td>
											</tr>
											<tr>
												<td>crosshair</td>
												<td>光标呈现为十字线。</td>
											</tr>
											<tr>
												<td>pointer</td>
												<td>光标呈现为指示链接的指针（一只手）</td>
											</tr>
											<tr>
												<td>move</td>
												<td>此光标指示某对象可被移动。</td>
											</tr>
											<tr>
												<td>e-resize</td>
												<td>此光标指示矩形框的边缘可被向右（东）移动。</td>
											</tr>
											<tr>
												<td>ne-resize</td>
												<td>此光标指示矩形框的边缘可被向上及向右移动（北/东）。</td>
											</tr>
											<tr>
												<td>nw-resize</td>
												<td>此光标指示矩形框的边缘可被向上及向左移动（北/西）。</td>
											</tr>
											<tr>
												<td>n-resize</td>
												<td>此光标指示矩形框的边缘可被向上（北）移动。</td>
											</tr>
											<tr>
												<td>se-resize</td>
												<td>此光标指示矩形框的边缘可被向下及向右移动（南/东）。</td>
											</tr>
											<tr>
												<td>sw-resize</td>
												<td>此光标指示矩形框的边缘可被向下及向左移动（南/西）。</td>
											</tr>
											<tr>
												<td>s-resize</td>
												<td>此光标指示矩形框的边缘可被向下移动（北/西）。</td>
											</tr>
											<tr>
												<td>w-resize</td>
												<td>此光标指示矩形框的边缘可被向左移动（西）。</td>
											</tr>
											<tr>
												<td>text</td>
												<td>此光标指示文本。</td>
											</tr>
											<tr>
												<td>wait</td>
												<td>此光标指示程序正忙（通常是一只表或沙漏）。</td>
											</tr>
											<tr>
												<td>help</td>
												<td>此光标指示可用的帮助（通常是一个问号或一个气球）。</td>
											</tr>
										</tbody>
									</table>
								</span>
							</li>
							<li>
								<a href="#">resize</a>(both)
								<span>设置或检索对象的区域是否允许用户缩放，调节元素尺寸大小。
									<br>如果希望此属性生效，需要设置对象的overflow属性，值可以是auto,hidden或scroll。
									<br>none：不允许用户调整元素大小。
									<br>both：用户可以调节元素的宽度和高度。
									<br>horizontal：用户可以调节元素的宽度
									<br>vertical：用户可以调节元素的高度。</span>
							</li>
							<li>
								<a href="#">ime-mode</a>(disabled)<span>输入法状态：设置或检索是否允许用户激活输入中文，韩文，日文等的输入法（IME）状态。
									<br>auto：不影响IME的状态。
									<br>normal：正常的IME状态
									<br>active：指定所有使用ime输入的字符。即激活本地语言输入法。用户仍可以撤销激活ime
									<br>inactive：指定所有不使用ime输入的字符。即激活非本地语言。用户仍可以撤销激活ime
									<br>disabled：完全禁用ime。对于有焦点的控件(如输入框)，用户不可以激活ime</span></li>
							<li><a href="#">pointer-events</a>(none/auto)<span>
									pointer-events:none 开启穿透点击,忽略自身
									<br>pointer-events:auto 忽略部分的内部重新开启
									<br><a href="https://www.poluoluo.com/jzxy/201109/142876.html">详细资料</a>
								</span>
							</li>
							<li>
								<a href="#">user-select</a>(none)
								<span>禁止用户选中文字
									<br>none：文本不能被选择
									<br>text：可以选择文本
									<br>all：当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。
									<br>element：可以选择文本，但选择范围受元素边界的约束
									<br>IE6-9不支持该属性，但支持使用标签属性 onselectstart="return false;" 来达到 user-select:none
									的效果；Safari和Chrome也支持该标签属性；
									<br>直到Opera12.5仍然不支持该属性，但和IE6-9一样，也支持使用私有的标签属性 unselectable="on" 来达到
									user-select:none 的效果；unselectable 的另一个值是 off；
									<br>除Chrome和Safari外，在其它浏览器中，如果将文本设置为
									-ms-user-select:none;，则用户将无法在该文本块中开始选择文本。不过，如果用户在页面的其他区域开始选择文本，则用户仍然可以继续选择将文本设置为
									-ms-user-select:none; 的区域文本；
									<br>
									html:
									<pre><code data-language="html" class="rainbow">
                    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">p</span></span> <span class="support attribute">onselectstart</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">return false;</span><span class="string quote">"</span> <span class="support attribute">unselectable</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">on</span><span class="string quote">"</span><span class="support tag close">&gt;</span>禁止被选择的文字<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">p</span></span><span class="support tag close">&gt;</span>
                    </code></pre>
									css:
									<pre><code data-language="css" class="rainbow">
                    <span class="entity name tag">p</span>{<span class="support css-property">user-select</span>:<span class="support css-value">none</span>;} //在自动生成前缀时
                    </code></pre>
								</span>
							</li>
							<li>
								<a href="#">appearance</a>(none)
								<span><a
										href="https://css.doyoe.com/properties/user-interface/appearance.htm">设置或检索外观按照本地默认样式</a></span>
							</li>
							<li>
								<a href="#">:placeholder</a>
								<span>占位提示字符
									<pre><code data-language="css" class="rainbow">
                    &amp;:<span class="support vendor-prefix">-moz-</span><span class="support css-value">placeholder</span>
                    &amp;:<span class="support vendor-prefix">-ms-</span><span class="support css-value">input-placeholder</span>
                    &amp;::<span class="support vendor-prefix">-webkit-</span><span class="support css-value">input-placeholder</span>
                    <span class="support css-property">color</span>: @color;
                    <span class="support css-property">font-size</span>:@size;
                    <span class="support css-property">text-align</span>:@align;
                    </code></pre>
								</span>
							</li>
						</ul>
						<h4>[<span>-</span>]兼容</h4>
						<ul>
							<li><a
									href="https://blog.163.com/liyali1855@126/blog/static/36910271201110422617984/">-moz-focus-inner</a><span>火狐表单控件居中</span>
							</li>
							<li><a
									href="https://www.qianduan.net/search-box-style-custom-webkit.html">-webkit-search</a><span>webkit搜索默认样式</span>
							</li>
							<li><a
									href="https://msdn.microsoft.com/en-us/library/ms530822(VS.85).aspx">-ms-interpolation-mode:bicubic</a><span>IE7图像缩放失真</span>
							</li>
						</ul>
						<h4>[<span>+</span>]scrollbar</h4>
						<ul style="display:none">
							<li><a href="#">ie</a><span>
									<table>
										<tbody>
											<tr>
												<td>scrollbar-base-color</td>
												<td>基色</td>
											</tr>
											<tr>
												<td>scrollbar-track-color</td>
												<td>轨道色</td>
											</tr>
											<tr>
												<td>scrollbar-face-color</td>
												<td>滑块色</td>
											</tr>
											<tr>
												<td>scrollbar-arrow-color</td>
												<td>箭头色</td>
											</tr>
											<tr>
												<td>scrollbar-highlight-color</td>
												<td>左上阴影的颜色</td>
											</tr>
											<tr>
												<td>scrollbar-shadow-color</td>
												<td>右下阴影的颜色</td>
											</tr>
											<tr>
												<td>scrollbar-3dlight-color</td>
												<td>箭头阴影的颜色</td>
											</tr>
											<tr>
												<td>scrollbar-dark-shadow-color</td>
												<td>立体阴影色</td>
											</tr>
										</tbody>
									</table>
									<br>
								</span></li>
							<li><a href="#">chrome</a><span>
									<table>
										<tbody>
											<tr>
												<td>::-webkit-scrollbar</td>
												<td>整体部分</td>
											</tr>
											<tr>
												<td>::-webkit-scrollbar-track</td>
												<td>轨道</td>
											</tr>
											<tr>
												<td>::-webkit-scrollbar-track-piece</td>
												<td>内层轨道</td>
											</tr>
											<tr>
												<td>::-webkit-scrollbar-thumb</td>
												<td>滚动条滑块</td>
											</tr>
											<tr>
												<td>::-webkit-scrollbar-button</td>
												<td>两侧按钮</td>
											</tr>
											<tr>
												<td>::-webkit-scrollbar-corner</td>
												<td>边角（横纵滚动条的交汇处）</td>
											</tr>
											<tr>
												<td>::-webkit-resizer</td>
												<td>边角拖拽控件</td>
											</tr>
										</tbody>
									</table>
									<br>
								</span></li>
							<li><a href="#">chrome伪元素</a><span>
									<table>
										<tbody>
											<tr>
												<td>:horizontal</td>
												<td>horizontal伪类适用于任何水平方向上的滚动条</td>
											</tr>
											<tr>
												<td>:vertical</td>
												<td>vertical伪类适用于任何垂直方向的滚动条</td>
											</tr>
											<tr>
												<td>:decrement</td>
												<td>decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的区域和按钮</td>
											</tr>
											<tr>
												<td>:increment</td>
												<td>increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮</td>
											</tr>
											<tr>
												<td>:start</td>
												<td>start伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的前面</td>
											</tr>
											<tr>
												<td>:end</td>
												<td>end伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的后面</td>
											</tr>
											<tr>
												<td>:double-button</td>
												<td>double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。</td>
											</tr>
											<tr>
												<td>:single-button</td>
												<td>single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。</td>
											</tr>
											<tr>
												<td>:no-button</td>
												<td>no-button伪类表示轨道结束的位置没有按钮。</td>
											</tr>
											<tr>
												<td>:corner-present</td>
												<td>corner-present伪类表示滚动条的角落是否存在。</td>
											</tr>
											<tr>
												<td>:window-inactive</td>
												<td>适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候。</td>
											</tr>
										</tbody>
									</table>
								</span></li>
							<li><a href="#">[compare]</a><span>
									<table>
										<tbody>
											<tr>
												<td>整体</td>
												<td>::-webkit-scrollbar</td>
												<td>整体样式，可用来设置宽度等，IE不可调整宽度</td>
											</tr>
											<tr>
												<td>轨道</td>
												<td>
													<p>::-webkit-scrollbar-track</p>
													<p>scrollbar-track-color</p>
												</td>
												<td>轨道样式，IE只能设置颜色，chrome可以加点内阴影和圆角</td>
											</tr>
											<tr>
												<td>滑块</td>
												<td>
													<p>::-webkit-scrollbar-thumb</p>
													<p>scrollbar-face-color</p>
												</td>
												<td>滑块样式，同上</td>
											</tr>
											<tr>
												<td>箭头</td>
												<td>
													<p>::-webkit-scrollbar-button</p>
													<p>scrollbar-arrow-color</p>
												</td>
												<td>
													<p>箭头样式，chrome下当设置了自定义scrollbar时默认则隐藏了箭头，这样看起来和平板差不多</p>
													<p>而IE还是需要给其配色，让它和整体看起来更协调</p>
												</td>
											</tr>
											<tr>
												<td>其他（IE）</td>
												<td>
													<p>scrollbar-base-color<br> scrollbar-highlight-color<br>
														scrollbar-shadow-color<br> scrollbar-3dlight-color<br>
														scrollbar-dark-shadow-color</p>
												</td>
												<td>&nbsp;IE下为了整体协调美观，左侧属性仍根据实际情况调整，通常我将它设置与滑块一致</td>
											</tr>
											<tr>
												<td>其他（Chrome）</td>
												<td>
													<p>::-webkit-scrollbar-track-piece<br>::-webkit-scrollbar-corner<br>::-webkit-resizer
													</p>
												</td>
												<td>chrome下有伪状态</td>
											</tr>
										</tbody>
									</table>
								</span></li>
						</ul>
					</div>
				</div>
			</div>

			<div class="col">
				<div class="block">
					<h3>布局I<span>-</span></h3>
					<div class="contents">
						<h4>[<span>-</span>]列表</h4>
						<ul>
							<li><a href="#">list-style</a><span>[简写] img position type,无序列表ul,有序列表ol,自定义列表dl
									<br>可以用列表来进行布局,清除列表样式ul设置list-style:none,ul{padding:0,margin:0}
									<br>如标记为图片时一般用背景图来替代
								</span></li>
							<li><a href="#">list-style-type</a>
								<span
									style="left: 731px; top: 197px; display: none;">仅作用于具有display值等于list-item的对象（如li对象）,如修改display值后不再显示(设置为块或其他特性均消失标记).
									<br>注意：ol,ul,dl对象的type特性为其后的所有列表项目（如li对象）指明列表属性。
									<br>此样式也可应用于counter计数器样式
									<table>
										<tbody>
											<tr>
												<th>值</th>
												<th>描述</th>
											</tr>
											<tr>
												<td>none</td>
												<td>无标记。</td>
											</tr>
											<tr>
												<td>disc（默认）</td>
												<td>实心圆。</td>
											</tr>
											<tr>
												<td>circle</td>
												<td>空心圆。</td>
											</tr>
											<tr>
												<td>square</td>
												<td>实心方块。</td>
											</tr>
											<tr>
												<td>decimal</td>
												<td>数字。( 1,2,3…… )</td>
											</tr>
											<tr>
												<td>decimal-leading-zero</td>
												<td>0开头的数字标记。( 01,02,03…… )</td>
											</tr>
											<tr>
												<td>lower-roman</td>
												<td>小写罗马数字(i, ii, iii, iv, v, 等。)</td>
											</tr>
											<tr>
												<td>upper-roman</td>
												<td>大写罗马数字(I, II, III, IV, V, 等。)</td>
											</tr>
											<tr>
												<td>lower-alpha</td>
												<td>小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)</td>
											</tr>
											<tr>
												<td>upper-alpha</td>
												<td>大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)</td>
											</tr>
											<tr>
												<td>lower-greek</td>
												<td>小写希腊字母(alpha, beta, gamma, 等。)</td>
											</tr>
											<tr>
												<td>lower-latin</td>
												<td>小写拉丁字母(a, b, c, d, e, 等。)</td>
											</tr>
											<tr>
												<td>upper-latin</td>
												<td>大写拉丁字母(A, B, C, D, E, 等。)</td>
											</tr>
											<tr>
												<td>hebrew</td>
												<td>传统的希伯来编号方式</td>
											</tr>
											<tr>
												<td>armenian</td>
												<td>传统的亚美尼亚编号方式</td>
											</tr>
											<tr>
												<td>georgian</td>
												<td>传统的乔治亚编号方式(an, ban, gan, 等。)</td>
											</tr>
											<tr>
												<td>cjk-ideographic</td>
												<td>简单的表意数字</td>
											</tr>
											<tr>
												<td>hiragana</td>
												<td>标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）</td>
											</tr>
											<tr>
												<td>katakana</td>
												<td>标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）</td>
											</tr>
											<tr>
												<td>hiragana-iroha</td>
												<td>标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）</td>
											</tr>
											<tr>
												<td>katakana-iroha</td>
												<td>标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）</td>
											</tr>
										</tbody>
									</table>

								</span></li>
							<li><a href="#">list-style-image</a>
								<span style="left: 806px; top: 219px; display: none;">list-style-image:url(img.png)
									<br>定位位置上会有问题.以文字中线开始显示图片.
									<br>并且也只当li依旧为list-item特性时才有效.
									<br>一般使用背景图来制作列表背景.</span></li>
							<li><a href="#">list-style-position</a><span
									style="left: 911px; top: 236px; display: none;">
									<strong>指标记的内外方式,而非(图片)标记坐标位置</strong>
									<br><b>outside</b>：列表项目标记放置在文本以外，且环绕文本不根据标记对齐（默认值）
									<br>1.当type在outside时,如RESET样式中设置ul的padding:0,则会看不到type图标(无论li是否设置padding);如设置ul的padding(例如)小于20,则type图标将会溢出在ul之外.
									<br>2.如设置li的padding-left,则标记位置不更改,而标记与内容之间拉开间距
									<br>3.如设置li的margin-left,则margin继承到标记之外,标记与父级拉开间距
									<hr><b>inside</b>：列表项目标记放置在文本以内，且环绕文本根据标记对齐。<a
										href="https://css.doyoe.com/properties/list/list-style-position.htm">[查看演示]</a>
									<br>1.当type在inside时,type会和文字一起距离浏览器默认padding缩进,设置padding:0时,则会贴边显示.
									<br>2.设置li的padding-left和margin-left视觉表现都为标记之外与父级拉开间距
								</span></li>
						</ul>
						<h4>[<span>-</span>]表格</h4>
						<ul>
							<li><a href="#">table-layout</a><span>
									适用于：table系元素。
									<br>auto:默认的自动算法。布局将基于各单元格的内容，换言之，可能你给某个单元格定义宽度为100px，但结果可能并不是100px。表格在每一单元格读取计算之后才会显示出来，速度很慢
									<br>fixed：固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关。也就是说，内容可能被裁切
									<br><a
										href="https://www.zhangxinxu.com/wordpress/2014/04/%E8%87%AA%E9%80%82%E5%BA%94%E8%A1%A8%E6%A0%BC-%E5%AD%97%E7%AC%A6%E6%8D%A2%E8%A1%8C-%E6%BA%A2%E5%87%BA%E7%82%B9%E7%82%B9%E7%82%B9-table-text-overflow-ellipsis-word-wrap-break-all/">关于text-overflow在单元格中的失效</a>
								</span></li>
							<li><a href="#">border-collapse</a><span>
									separate：边框独立
									<br>collapse：相邻边被合并
									<br>只有当表格边框独立（即border-collapse属性等于separate时），border-spacing和empty-cells才起作用。
								</span></li>
							<li><a href="#">border-spacing</a><span>
									该属性作用等同于标签属性cellspacing(单元格边距)。border-spacing:0等同于cellspacing="0"
									<br>如果提供全部两个length值时，第一个作用于横向间距，第二个作用于纵向间距。
									<br>如果只提供一个length值时，这个值将作用于横向和纵向上的间距。
									<br>*一般将此值与表格内标签属性cellpadding,cellspacing均设为0,通过CSS边距来控制.
								</span></li>
							<li><a href="#">caption-side</a><span>
									top：指定caption在表格上边（默认）
									<br>bottom：指定caption在表格下边
									<br>要在IE7及以下浏览器中实现top与bottom参数值的效果，可直接在caption标签内定义标签属性valign为top和bottom。
								</span></li>
							<li><a href="#">empty-cells</a>
								<span>show：指定当表格的单元格无内容时，显示该单元格的边框。（默认）
									<br>hide：指定当表格的单元格无内容时，隐藏该单元格的边框。
									<br>IE7及以下浏览器中默认隐藏无内容的单元格边框，要想使其获得与show参数值相同的效果，可以变相给该空单元格加个占位且不可见的元素，例如全角空格或\&nbsp;等等。
								</span></li>
						</ul>
						<h4>[<span>-</span>]其他</h4>
						<ul>
							<li>
								<a href="#">p/div</a>
								<span>
									充分利用p,h1-h6等标签进行语义化.<b>但不要在p中放置h1-h6,结构出错。</b>
								</span>
							</li>
							<li>
								<a href="#">h1-h6</a>
								<span>
									在H内部直接放置浮动右元素，IE7会换行，改用position定位
								</span>
							</li>
							<li>
								<a href="#">ul/li</a>
								<span>
									1.用ul+li打造table效果时,可以自适应宽度换行,边框设置的方式,设置全框,负margin,可规避padding及屏幕尺寸变化问题.<br>
									2.IE6下ul默认表现为block，浮动后依旧占据100%，即使父级浮动，需要自身表现为dbi或fl（设置为dbi如果没有压缩html会出现空格），即用到ul,li来构造布局时，注意给ul,li添加浮动hack。<br>
									3.在ul,li布局时，如非标准结构，在IE67中可能会解析错误导致bug，当非标准结构时建议使用div替代ul,li。<br>
									4.ul表现为dbi在部分原生IE8中可能有渲染bug，添加margin强制渲染占据宽度。
								</span>
							</li>
							<li>
								<a href="#">table</a>
								<span>
									1.表格中插div会脱离表格在外<br>
									2.表格中对合并后 或tr 表现为block,会只有第一个单元格宽度,可直接应用arrow,tr的显示应用table-row而非block<br>
									3.垂直th添加scope="col"
								</span>
							</li>
							<li>
								<a href="#">a/img</a>
								<span>
									a <br>
									1.IE10-对于a与同级元素，空的a调整层级或顺序仍然无法点击，需要将a包裹其他元素<br>
									2.在平板中a标签中包含:hover触发改变display:none/block的元素，旧平板无法点击，将display切换改为透明度更改并可能需要修改ie78的filter值<br>
									<hr>
									img <br>
									1.当利用图片一侧尺寸铺满，另一侧自动来构造自动伸缩div时，需要设置图片db，否则会因图片dbi产生3px空白。
								</span>
							</li>
							<li>
								<a href="#">form</a>
								<span>
									1.IE6-8表单元素默认不继承父级字体大小.<br>
									2.IE6-8表单控件元素不继承form字体行高.
								</span>
							</li>
							<li>
								input <a href="#">radio/checkbox</a>
								<span>
									1.单复选框的对齐问题,可用vertical-algin:-3px解决。<a
										href="https://www.zhangxinxu.com/wordpress/?p=56">参考资料</a>
								</span>
							</li>
							<li>
								input <a href="#">text</a>
								<span>
									1.IE6-8中,input text不会因为行高而撑开高度,按钮正常
									<br>2.IE6-7中,对input设置text-indent会整个缩进,应设为padding
									<br>3.input默认为border-box模型，宽高包含padding与border！
								</span>
							</li>
							<li>
								<a href="#">button</a>
								<span>
									1.Chrome中,input button不会因行高而撑开高度,text正常
								</span>
							</li>
							<li>
								<a href="#">select</a>
								<span>
									0.最小高度24px.
									<br>1.chrome等可直接通过行高撑开高度，IE8-不可.
									<br>2.IE8需要通过padding，但使用padding方法时，IE8-绘制border会把里面按钮也绘制。
									<br>3.IE7需要设置height，但行高仍然无法使字体垂直居中。
									<br>4.IE6无法撑开高度。
									<br>5.height非字体height，而是包含了padding,border的height，默认为border-box。
									<br>6.右侧padding在IE中(包括11)会出现在下拉按钮以外，故不应设置过大。
								</span>
							</li>
						</ul>
						<h4>[<span>-</span>]多列</h4>
						<ul>
							<li><a href="#">columns</a>(Npx [M])
								<span>多列,简写时注意加<strong>s</strong>,简写中只含宽度(带单位,不能百分比)和列数.Chrome需要前缀-webkit-
									<br>应用于除table外的非替换块级元素，display:table-cell 元素, 内联块元素。
									<br>实现多列的是里面的内容,而非自身.
									<br>简写方式一：设置width,column:200px 3（固定3列200宽。）
									<br>简写方式二：column:200px （自动根据父级宽度生成X列）
									<br>同时指定2个值时，优先先按列数来分配宽.例如浏览器宽度1800px,指定3列200px宽,结果为分配为3列600px宽,忽略200宽指定值;如果指定宽度200px,未指定列数,则按宽度自动平分为9列
									<br>参考资料：<a
										href="https://wenku.baidu.com/view/76a20b60011ca300a6c3909d.html">替换/非替换块级/内联元素</a></span>
							</li>
							<li><a href="#">column-width</a>(Npx)<span>列宽</span></li>
							<li><a href="#">column-count</a>(N)<span>列数</span></li>
							<li><a href="#">column-gap</a>(Npx)<span>列间隔</span></li>
							<li><a href="#">column-rule</a>(1px solid #ccc)<span>列间隔边框 1px solid #ccc
									<br>column-rule-style等同于border样式</span></li>
							<li><a href="#">column-span</a>(N/all)<span>列横跨,适用于：除浮动和绝对定位之外的块级元素
									<br>是否横跨全部,all和none,不可设置数值非表格,此属性应设置在被应用多列属性的子元素上,多列无继承性,对于不想被继承多列的元素应写在多列父元素之外,而非去设置多列横跨.</span>
							</li>
						</ul>
						<h4>[<span>+</span>]Box</h4>
						<ul style="display:none">
							<li><a href="#">display:-webkit-box</a><span>旧手机浏览器</span></li>
							<li><a href="#">-webkit-box-orient</a><span>设置或检索伸缩盒对象的子元素的排列方式。
									<br>horizontal：设置伸缩盒对象的子元素从左到右水平排列
									<br>vertical：设置伸缩盒对象的子元素从上到下纵向排列
									<br>inline-axis：设置伸缩盒对象的子元素沿行轴排列
									<br>block-axis：设置伸缩盒对象的子元素沿块轴排列
								</span></li>
							<li><a href="#">-webkit-box-pack</a><span>设置或检索伸缩盒对象的子元素的对齐方式。
									<br>start：设置伸缩盒对象的子元素从开始位置对齐（大部分情况等同于左对齐，受）
									<br>center：设置伸缩盒对象的子元素居中对齐
									<br>end：设置伸缩盒对象的子元素从结束位置对齐（大部分情况等同于右对齐）
									<br>justify：设置或伸缩盒对象的子元素两端对齐</span></li>
							<li><a href="#">-webkit-box-align</a><span>设置或检索伸缩盒对象的子元素的对齐方式。
									<br>start：设置伸缩盒对象的子元素从开始位置对齐
									<br>center：设置伸缩盒对象的子元素居中对齐
									<br>end：设置伸缩盒对象的子元素从结束位置对齐
									<br>baseline：设置伸缩盒对象的子元素基线对齐
									<br>stretch：设置伸缩盒对象的子元素自适应父元素尺寸</span></li>
							<li><a href="#">-webkit-box-flex</a><span>使用浮点数指定对象所分配其父元素剩余空间的比例。
								</span></li>
							<li><a href="#">-webkit-box-flex-group</a><span>用整数值来定义伸缩盒对象的子元素所在的组。</span></li>
							<li><a href="#">-webkit-box-ordinal-group</a><span>用整数值来定义伸缩盒对象的子元素显示顺序。</span></li>
							<li><a href="#">-webkit-box-direction</a><span>设置或检索伸缩盒对象的子元素的排列顺序是否反转。normal |
									reverse</span></li>
							<li><a href="#">-webkit-box-lines</a><span>设置或检索伸缩盒对象的子元素是否可以换行显示。single | multiple</span>
							</li>
						</ul>
						<h4>[<span>-</span>]Flex</h4>
						<ul>
							<li><a href="#">flex</a>
								<span>
									<a href="https://www.webhek.com/apps/flex-cheatsheet/">看完这个你就会flex弹性布局</a>
									<br><a href="https://demo.agektmr.com/flexbox/">在线调试flexbox布局效果</a>
									<br><a href="https://www.runoob.com/w3cnote/flex-grammar.html">参考资料</a>
								</span></li>
							<li><a href="#">flex-grow</a>
								<span>剩余空间的扩展比例,默认值0</span></li>
							<li><a href="#">flex-shrink</a>
								<span>剩余空间的收缩比例,默认1</span></li>
							<li><a href="#">flex-basis</a><span>如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间</span></li>

							<li><a href="#">flex-direction</a><span>
									row：横向从左到右排列（左对齐），默认的排列方式。
									<br>row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
									<br>column：纵向排列。
									<br>row-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
								</span></li>
							<li><a href="#">flex-flow</a><span>flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row
									nowrap。
									<br><a href="https://www.runoob.com/w3cnote/flex-grammar.html">参考资料</a>
								</span></li>
							<li><a href="#">flex-wrap</a><span>
									默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
									<br><a href="https://www.runoob.com/w3cnote/flex-grammar.html">参考资料</a>
								</span></li>
							<li><a href="#">align-content</a><span>
									align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
									<br><a href="https://www.runoob.com/w3cnote/flex-grammar.html">参考资料</a>
								</span></li>
							<li><a href="#">align-items</a><span>
									flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
									<br>flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
									<br>center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
									<br>baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
									<br>stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
								</span></li>
							<li><a href="#">align-self</a><span>
									auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
									<br>flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
									<br>flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
									<br>center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
									<br>baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
									<br>stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
								</span></li>
							<li><a href="#">justify-content</a><span>
									flex-start：弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
									<br>flex-end：弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
									<br>center：弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐，同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距（如果剩余空间是负数，则保持两端相等长度的溢出）。
									<br>space-between：弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于'flex-start'。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。
									<br>space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于'center'。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。
								</span></li>
							<li><a href="#">order</a><span>用整数值来定义排列顺序，数值小的排在前面。可以为负值。</span></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="col">
				<div class="block">
					<h3>布局II<span>-</span></h3>
					<div class="contents">
						<h4>[<span>-</span>]盒模型</h4>
						<ul>
							<li><a href="#">Standards/Quirks Mode</a><span>
									HTML文档根据文档顶部的doctype声明来决定渲染模式，有<b>标准模式（Standards Mode）</b>与<b>怪异模式（Quirks
										mode，或叫做混杂模式）</b>两种模式。
									<br>IE5及以前默认总是表现为怪异模式，IE6~IE8遇到非正常声明或特定声明时也会进入怪异模式。
									<br>否则，如果有正确声明doctype并在顶端，则默认进入标准模式，即包括HTML5声明在IE6~IE8，也会进入标准模式，而非一定需要HTML4长长的声明。
									<br>而许多现代浏览器即使是怪异模式，表现也和标准模式是一致的。
									<br>
									<br>IE6+进入怪异模式的条件：
									<br>1.IE6~IE8没有doctype的页面是在怪异模式下渲染。
									<br>2.在文档类型定义之前出现非空格和换行字符，浏览器也会激活怪异模式。
									<br>3.除上述两种情况外，有一些特殊声明时用来特定激活怪异模式的。
									<br>具体见下表，删减至只考虑中国市场常用浏览器（来自<a href="https://hsivonen.fi/doctype/">《Activating
										Browser Modes with Doctype》</a>）
									<br><a
										href="https://www.cnblogs.com/iruxu/p/html-doctype_and_box-model.html">参考资料</a>
									<br><b>标准模式与怪异模式下导致的和模型区别：</b>
									<br>需要知道的是，盒模型差异是两种模式导致的最重要的区别之一，但是IE一些其他的BUG，即使是在标准模式下，仍然需要通过HACK解决，而并非处于标准模式下则没有BUG。
									<br>Box model ：标准模式width=content，怪异模式width=content+padding+border
									<br>例外：即使是标准模式下,button总是应用border-box,现代浏览器为了表现一致,默认添加了box-sizing:border-box属性，故在button的高度上仍然要考虑border而影响的高度,即设置height=height+border*2。
									<br>另外，button在现代浏览器中总是表现为基于垂直对齐，在IE7~8中表现为顶部对齐，在IE6中表现为基线对齐，故需要设置vertical-align:middle初始化让所有表现一致。
									<br><a href="https://www.quirksmode.org/css/quirksmode.html">参考自《Quirks mode and
										strict mode》查阅更多区别</a>
								</span></li>
							<li><a href="#">box-sizing</a>
								<span>
									<b>content-box</b>：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即
									( Element width = width + border + padding ) 此属性表现为标准模式下的盒模型。
									<br>
									<b>border-box</b>：padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即
									( Element width = width ) 此属性表现为怪异模式下的盒模型。
								</span>
							</li>
							<li><a href="#">display</a>
								<span>
									完整参考资料：<a href="https://www.w3.org/TR/css-display/">W3C</a>
									<br>当元素float,fixed,abosulte或者为根元素时,总是表现为块级元素(但并不会宽度占据100%,而是根据自己内容扩展,正确理解成inline-block?但又不完全是,由于float的性质为包裹)
									<table border="1" cellspacing="0" cellpadding="2">
										<tbody>
											<tr>
												<td valign="top">none</td>
												<td valign="top">隐藏对象,不保留物理空间</td>
											</tr>
											<tr>
												<td valign="top">inline</td>
												<td valign="top">内联元素 a,span,文本格式化(b,strong,i,em,sub,sup)</td>
											</tr>
											<tr>
												<td valign="top">block</td>
												<td valign="top">块级元素 div,p,h1~h6,h5,form,ul,ol新元素</td>
											</tr>
											<tr>
												<td valign="top">inline-block</td>
												<td valign="top">img,表单控件(input,button,textarea,label)</td>
											</tr>
											<tr>
												<td valign="top">list-item</td>
												<td valign="top">列表项目li</td>
											</tr>
											<tr>
												<td valign="top">table</td>
												<td valign="top">块级元素级的表格table,表格内部元素表现为对应的table-cell等。
													<br>table-caption | table-cell
													<br>table-row | table-row-group
													<br>table-column | table-column-group
													<br>table-footer-group | table-header-group</td>
											</tr>
											<tr>
												<td valign="top">inline-table</td>
												<td valign="top">内联元素级的表格</td>
											</tr>
											<tr>
												<td valign="top">flex</td>
												<td valign="top">弹性伸缩盒</td>
											</tr>
											<tr>
												<td valign="top">box</td>
												<td valign="top">inline-box,块/内联块级弹性伸缩盒（旧）</td>
											</tr>
											<tr>
												<td valign="top">flex</td>
												<td valign="top">inline-flexbox,块/内联块级弹性伸缩盒（新）</td>
											</tr>
											<tr>
												<td valign="top">run-in</td>
												<td valign="top">根据上下文决定对象是内联对象还是块级对象</td>
											</tr>
										</tbody>
									</table>
								</span>
							</li>
							<li><a href="#">zoom</a>
								<span
									style="left: 961px; top: 237px; display: none;">设置或检索对象的缩放比例,normal实际尺寸,1.x浮点数,120%百分比.
									<br>1.可局部用于响应式设计改变DOM尺寸，会有偏移错位（以像素起点对齐变换）
									<br>2.可用于触发IE6的haslayout,拥有haslayout属性的层会自动管理其宽高,除非设置overflow否则宽高会自动扩展.
									<br>现代浏览器会溢出显示,但自身宽高不变.
								</span>
							</li>
							<li>
								<a href="#">(hasLayout)</a>
								<span>
									<a href="https://baike.baidu.com/view/2945869.htm?fr=aladdin">详细文档</a>
									<br>触发haslayout的条件：
									<br>IE6:
									<br>* display: inline-block
									<br>* float: (left 或 right)
									<br>* position: absolute
									<br>* width: (任何值除了auto)
									<br>* height: (任何值除了auto)
									<br>* writing-mode: tb-rl
									<br>* zoom: (除 normal 外任意值)
									<br>IE7:（额外）
									<br>* min-height: (任意值)
									<br>* max-height: (除 none 外任意值)
									<br>* min-width: (任意值)
									<br>* max-width: (除 none 外任意值)
									<br>* overflow: (除 visible 外任意值)
									<br>* overflow-x: (除 visible 外任意值)
									<br>* overflow-y: (除 visible 外任意值)
									<br>* position: fixed
								</span>
							</li>
							<li>
								<a href="#">(BFC)</a>
								<span>
									Block fomatting context<a
										href="https://www.w3.org/TR/CSS21/visuren.html#block-formatting">详细文档</a>
									<br>BFC会阻止垂直外边距（margin-top、margin-bottom）折叠
									<br>BFC不会重叠浮动元素
									<br>BFC可以包含浮动
									<br>触发BFC条件
									<br>* 根元素,fieldset
									<br>* float的值不为none
									<br>* overflow的值不为visible
									<br>* display的值为inline-block、table-cell、table-caption、flex、inline-flex
									<br>* position的值为absolute或fixed
								</span>
							</li>
						</ul>
						<h4>[<span>-</span>]表现</h4>
						<ul>
							<li>display:<a href="#">inline-block</a><span>
									1.IE6-7支持inline元素转换成inline-block，但不支持block元素转换成inline-block，所以非inline元素在IE6,7下要转换成inline-block，需先转换成inline，然后触发hasLayout，以此来获得和inline-block类似的效果；
									<br>解决方案：
									<br>div{display:inline-block;*display:inline;*zoom:1;}
									<br>2.默认inline-block元素之间默认会有间隔,是由于html元素间200B空格导致的(根据上下文字体大小有差异),可以通过连接html元素,或注释,或分行,及其他方式去掉.(浮动亦可,但浮动无法制作横向布局)
									<br><a
										href="https://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/">详细参考资料</a>
									<br>3.禁止换行还需要设置white-space:nowrap制作横向滚动效果.
								</span></li>
							<li>display:<a href="#">table-cell</a><span>
									特点：
									<br>1.table-cell有类似inline-block的可并行性
									<br>2.表格单元格宽度根据内容扩展，自行设置无效。
									<br>3.表格单元格同行元素总是等高。
									<br>注意：
									<br>1.IE8+有效
									<br>2.设置了display:table-cell的元素对宽度高度敏感，【对margin值无反应】，响应padding属性
									<br>3.display:table-cell与float:left或是position:absolute属性尽量不用同用
									<br>作用：
									<br>1.可以通过设置vertical-align:middle内容垂直居中
									<br>2.可用于宽度自适应布局，因为单元格本质宽度即由内容宽度决定。注意设置vertical-align:top
									<br>hack处理display:table-cell; width:2000px;*width:auto;*zoom:1;
									<br>3.可用于等高布局，即使不设置高度也会与同行元素等高。
									<br>hack处理display:table-cell; width:30%; margin-bottom:-100px;
									*padding-bottom:110px;*float:left;
									<br><a
										href="https://www.zhangxinxu.com/wordpress/2010/10/%E6%88%91%E6%89%80%E7%9F%A5%E9%81%93%E7%9A%84%E5%87%A0%E7%A7%8Ddisplaytable-cell%E7%9A%84%E5%BA%94%E7%94%A8/">参考资料</a>
									<br>4.自适应.cell{display:table-cell;*display:inline-block;} //table-cell content +
									auto side*2
									<br>5.td中让元素垂直居中对齐，是对元素img设置y而非父级 ，文字则设置父级
								</span></li>
						</ul>
						<h4>[<span>-</span>]尺寸</h4>
						<ul>
							<li><a href="#">calc()</a><span>长度计算,width:calc(100% - 50px)
									<strong>中间必须有空格！</strong></span></li>
							<li><a href="#">width</a><span>宽度
									<br>1.IE6
									BUG:当元素设置百分比宽高时,自动继承父级,宽度由于block默认占比100%,即总是不会缺失,但若父级高度自适应,则IE6会继续向上级继承,而现代浏览器则继承当前父级内容实际产生的高度.
									<br>2.IE6 BUG:1像素BUG,尽量设置尺寸为偶数或不设置<a
										href="https://www.yuzi.me/Share/ie6qishubug.html">参考资料</a>
									<br>3.子元素设置100%宽高时不包含父元素的padding!当父元素有padding时,因设置固定尺寸或修改父级模型!
									<br>4.width:auto 现代浏览器中表示根据内容自动扩展,而IE6-7表示占满父级
									<br>5.IE6-7对宽度的处理略有差异，特别是IE7下有许多离奇BUG，取百分比小数时，尽量只取到1位或取整
								</span></li>
							<li><a href="#">height</a><span>高度
									<br>1.如果要给元素定义100%高度，必须要明确定义它的父级元素的高度，如果你需要给元素定义满屏的高度，就得先给html和body定义height:100%; <a
										href="https://www.cnblogs.com/clare-zhang/archive/2011/08/26/2154220.html">参考资料</a>
									<br>2.对于绝对定位拉伸的元素，内部元素可以直接使用百分比
									<br>3.IE6-7中浮动创建的自适应布局,需要主动给定父级高度，否则绝对定位的元素无法正常定位。
									<br>4.<a
										href="https://www.zhangxinxu.com/wordpress/2015/02/different-height-100-height-inherit/">height:inherit</a>的用法(IE8+)
								</span></li>
							<li><a href="#">min-width/height</a><span>最小宽高
									<br>ie7-8支持,仅ie6不支持
									<br>IE6触发haslayout时,总是会自动管理其内容的宽高,自适应增长
									<br>故可以写成.test{min-height:200px;_height:200px;}
								</span></li>
							<li><a href="#">max-width/height</a><span>最大宽高
									<br>1.ie7-8支持,仅ie6不支持
								</span></li>
						</ul>
						<h4>[<span>-</span>]边框</h4>
						<ul>
							<li><a href="#">border</a><span>[简写]border:1px solid #ccc;
									<br>[0px height]元素的边框位置IE6 BUG！
									<br><b>当引入一个透明边框时,ie6+会增长内部空间至边框区域(背景色,不含内容),ie6显示黑色边框.</b>
									<hr>border-width宽度：
									<br>指定一个宽度,此宽度在双线时等于其间隔.
									<hr>border-style样式：
									<br>none：无轮廓（等价border-width:0）
									<br>dotted：点状轮廓。IE6下显示为dashed效果
									<br>dashed：虚线轮廓。
									<br>solid：实线轮廓
									<br>double：双线轮廓。两条单线与其间隔的和等于指定的border-width值
									<br>groove：3D凹槽轮廓。
									<br>ridge：3D凸槽轮廓。
									<br>inset：3D凹边轮廓。
									<br>outset：3D凸边轮廓。
									<hr>border-color颜色：
									<br>如果想在hover上做边框显示不发生抖动,应将默认状态添加如1px solid transparent
									<br>三角制作：<a
										href="https://apps.eky.hk/css-triangle-generator/zh-hant">在线生成</a>（利用宽高0,设置1个夹角边框大值）
									<br>arrow生成：<a href="https://cssarrowplease.com/">GO TO!</a>
									<br><img src="./triangle.png" alt="">
								</span></li>
							<li><a href="#">border-top</a><span>
									单边:border-top/border-bottom/border-left/border-right
									<br>取消某一边:border:1px solid #ccc;border-bottom:none;
								</span></li>
							<li><a href="#">border-width/color/style</a><span>
									border-width/color/style:上 右 下 左;4个值
								</span></li>
							<li><a href="#">border-radius</a>
								<span>[边框圆角简写]border-radius:5px 4px 3px 2px;
									<br>四个半径值分别是左上角、右上角、右下角和左下角,可以设置百分比.
									<br>提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数（顺时针顺序）
									<br>border-radius: 15px 5px 25px 5px / 3px 5px 10px 15px;
									<br>改变形状：
									<br>正方形-&gt;圆：radius=width|height/2
									<br>叶子-&gt; 左上+右下,注意书写方式与简写代表
									<br>半圆-&gt;宽度设为高度的一半，并且也只设置左上角和左下角的半径
									<br>饼-&gt;四分之一圆的实现方法是把高度和宽度设置为相等，只设置一个圆角，其半径等于高度或宽度
									<br>用radius画形状<a href="https://www.xincss.com/?p=221">参考资料</a>
									<br>在线生成：<a href="https://www.css3maker.com/border-radius.html">GO TO!</a>
									<hr>
									扩展:
									<br>1.<a
										href="https://stackoverflow.com/questions/17464167/css-image-hover-inside-border-radius">chrome
										hover radius bug</a>
								</span></li>
							<li><a href="#">border-top-left-radius</a><span>
									单角圆角,注意书写格式,先写top/bottom后写left/right
									<br>提供2个参数，2个参数以空格分隔，每个参数允许设置1个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数
									<br>border-top-left-radius:5px 10px。不用“/”分割
								</span></li>
							<li><a href="#">border-image</a>
								<span>border-image:url(路径不需要引号) 80 80 80 80 round/stretch
									<br>在线图片边框生成：<a href="https://iruxu.com/to-be-css/borderimage/index.htm">GO TO!</a>
									<br><a
										href="https://github.com/AlloyTeam/Mars/blob/master/solutions/border-1px.md">移动端1像素边框处理</a>
								</span></li>
							<li><a href="#">outline</a><span>
									轮廓边框,在border之外,chrome有焦点样式.另可作为定位参考或特殊动画
									<br>不允许类似border属性那样能将自身拆分为border-top..
									<br>IE6-7不支持,IE8支持
								</span></li>
							<li><a href="#">outline-offset</a>
								<span>用长度值来定义轮廓偏移。允许负值。
									<br>0是以border边界作为参考点的，正值从border边界往外延，负值从border边界往里缩.
									<br>可用outline来制作一些边框动画但又不改变原大小并非真正边框的改变(因为边框大小改变必然内容需要改变)</span></li>
						</ul>
						<h4>[<span>-</span>]层属性</h4>
						<ul>
							<li><a href="#">padding</a>
								<span>内部补白
									<br>设置：
									<br>[简写]依次设置上右下左padding:1px 2px 3px 4px;
									<br>[单边]padding-top/right/bottom/left
									<br>[缩写]如果只提供一个，将用于全部的四边;如果提供两个，第一个用于上、下，第二个用于左、右;如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
									<br>[生效]非替代(non-Replaced)行内元素可以使用该属性设置左、右两边的内补丁；若要设置上、下两边的内补丁，必须先使该对象表现为块级或内联块级。即内联元素(a等)设置padding水平有效,垂直无效,除非转换display值。margin同理。
									<br>注意：
									<br>1.默认背景图片的平铺是包含在padding区域的
									<br>2.padding生效在伪对象之外。
									<br>3.%比值<b>水平（默认）书写模式下，参照其包含块 width 进行计算，其它情况参照包含块 height，margin同理</b><a
										href="https://www.ituring.com.cn/article/64581">参考资料</a>绝对定位的top/left等百分比按照父级对应尺寸。
									<br>4.IE7会胡乱继承padding,自适应宽高的地方必要应设置父级宽高并设置隐藏。<br>
									5.当设置类似必须overflow但内部有元素偏移时，可用padding替代margin。
								</span></li>
							<li><a href="#">margin</a><span>外部补白.
									<br>margin-left/right:num/%/auto. 当margin-left/right为auto时水平居中
									<br><b>百分比:水平（默认）书写模式下，参照其包含块 width 进行计算，其它情况参照 height ，可以为负值</b>
									<br>1.内联元素垂直无效
									<br>非替代(non-Replaced)行内元素可以使用该属性设置左、右两边的外补丁；若要设置上、下两边的外补丁，必须先使该对象表现为块级或内联块级。
									<br>2.外边距合并 <a
										href="https://www.w3school.com.cn/css/css_margin_collapsing.asp">参考文档</a>
									<br>当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
									<br>当一个元素包含在另一个元素中时【假设没有内边距或边框把外边距分隔开】，它们的上和/或下外边距也会发生合并。
									<br>假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并
									<br>如果这个外边距遇到另一个元素的外边距，它还会发生合并
									<br>【margin折叠扩展】：
									<br>margin折叠只发生在块级元素上，且只发生在垂直上
									<br>浮动元素的margin不与任何margin发生折叠；
									<br>绝对定位元素的margin不与任何margin发生折叠；
									<br>设置了display:inline-block的元素不发生折叠；
									<br>设置了属性overflow且值不为visible的块级元素，将不与它的子元素发生margin折叠；
									<br>根元素的margin不与其它任何margin发生折叠,指html而非body
									<br>IE6-7中,如果父元素触发了haslayout,则不会发生折叠
									<br>3.margin负值应用
									<br>margin-top/left：会改变自身文本流位置,后面的元素依次顶上.
									<br>margin-bottom/right；不改变自身文本流位置,改变后面元素的文本流位置向前移
									<br>百分比适应下的边框应用,hover状态的-双倍border应用.
									<br><b>当负值margin向上移动文本流时，若上方元素设置了相对定位，则会覆盖在本元素之上，理解成z-index成为1.需要将自身也设置pr;</b>
									<br>4.边距非法继承
									<br>IE6有时候会沿袭继承上上级的一些属性,ie6无法识别.class.class双class样式值,注意单独补充设置.
									<br>如默认设置了父级margin:val 在子.class上清除.避免写成.class.class
									<br>【BUG】：
									<br>1.IE6双倍margin
									<br>对块状容器元素设置了float和与float相同方向的margin值就会出现双倍margin
									<br>解决方法：设置BUG元素display:inline;
									<br>由于当元素float的时候，display样式的值就会自动转换为“block”，无论display先前设置的属性是什么都会失去效果，不会影响块级特性。
									<br>2.当上一个元素为绝对定位元素,IE6~7下margin-top会失效，根据情况设置padding或自身也设置为绝对定位
								</span></li>
							<li><a href="#">visibility</a><span>
									此属性为隐藏的对象保留其占据的物理空间如果希望对象为可视，其父对象也必须是可视的。
									<br>visible： 设置对象可视
									<br>hidden： 设置对象隐藏
									<br>collapse： 主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。
									<hr>使得一个DOM元素不显示在浏览器可视范围内的方法：
									<br>display:none
									<br>visibility:hidden
									<br>width:0;height:0;opacity:0;z-index:-1000
								</span></li>
							<li><a href="#">overflow</a><span>溢出
									<br>使overflow生效需要指定尺寸!而非自适应尺寸
									<br>visible： 对溢出内容不做处理，内容可能会超出容器。
									<br>hidden： 隐藏溢出容器的内容且不出现滚动条。
									<br>scroll： 隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。
									<br>auto： 当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为body对象和textarea的默认值。
									<br>在IE6/7中，overflow无法正确的隐藏有相对定位position:relative;的子元素。解决方法就是给外包容器.wrap加上position:relative;。
									<br>扩展：
									<br><a href="https://iruxu.com/fixbug/ie78scroll">IE78scroll无法用滚轮滚动bug</a></span>
							</li>
							<li><a href="#">overflow-x</a><span>横向溢出处理</span></li>
							<li><a href="#">overflow-y</a><span>纵向溢出处理
									<br>对html元素设置overflow:hidden;可隐藏浏览器滚动条,通过js设置让body,html滚动</span></li>
						</ul>
						<h4>[<span>-</span>]定位</h4>
						<ul>
							<li><a href="#">float</a><span>
									<a href="https://www.zhangxinxu.com/wordpress/?p=583">浮动详解</a> <a
										href="https://www.imooc.com/view/121">视频版</a>
									<br>【特性】：
									<br>1.浮动内置设置：设置了float的元素则自动转换display为block.只有块级元素具有宽高等特性.
									<br>2.浮动原理1.环绕特性本质，2.脱离文本流特性
									<br>3.与非浮动元素的margin问题：如果浮动并未被闭合处理，下级非浮动元素默认还是以“环绕”浮动元素，其margin会作用在空的区域，此时应在浮动元素上设置margin
									<br>【浮动闭合与BFC】 <a href="https://www.cnblogs.com/dolphinX/p/3508869.html">参考文档</a>
									<br>1.清除浮动解决方案：
									<br>.clearfix:after {content:"\200B"; display:block; height:0; clear:both; }
									<br>.clearfix:after {content:"";display:table;clear:both;}
									<br>.clearfix { *zoom:1; }
									<br><a href="https://www.w3cfuns.com/article-1287-1.html">完整参考资料</a>
									<br>2.BFC条件：
									<br>float为 left|right
									<br>overflow为 hidden|auto|scroll
									<br>display为 table-cell|table-caption|inline-block
									<br>position为 absolute|fixed
									<br>【IE BUG】
									<br>1:IE6 双倍margin BUG
									<br>对块状容器元素设置了float和与float相同方向的margin值就会出现双倍margin
									<br>解决方法：设置BUG元素：display:inline;
									<br>由于当元素float的时候，display样式的值就会自动转换为“block”,无论display先前设置的属性是什么都会失去效果，不会影响块级特性。
									<br>2.IE6下3像素bug：
									<br>当浮动元素与非浮动元素相邻时,会发生3像素间隙,可设置浮动元素_margin-right:-3px;或使非浮动元素浮动.
									<br><a
										href="https://pewper.blog.163.com/blog/static/2970860820126261195866/">详细参考资料</a>
									<br>中间列自适应布局方案:左右各浮动（层级需要都在不浮动之前！），需要解决3px bug
									<br>3.IE6-7浮动自适应布局
									<br>IE6-7中浮动创建的自适应布局,需要主动给定父级高度，否则绝对定位的元素无法正常定位。
								</span></li>
							<li><a href="#">clear</a><span>清除浮动：none,left,right,both
									<br>清除浮动只影响自己，而不影响其他元素；
									<br>对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。
									<br><a
										href="https://www.dabaoku.com/jiaocheng/wangye/css/2013040918035.shtml">参考资料1</a>
									<br><a
										href="https://www.zhangxinxu.com/wordpress/2014/06/understand-css-clear-left-right-and-use/">参考资料2</a>
								</span></li>
							<li><a href="#">position:static</a><span>对象遵循常规流</span></li>
							<li><a href="#">position:relative</a><span>
									相对定位：对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left属性进行偏移时不影响常规流中的任何元素
									<br>1.相对定位不同于margin-left/top,不会改变原先文档流,html后者层级默认仍然比前者高
									<br>2.相对定位可设置z-index改变层级
								</span></li>
							<li><a href="#">position:absolute</a><span>绝对定位：<a
										href="https://www.imooc.com/learn/192">【参考资料】</a>
									<br>特征：
									<br>1.对象脱离常规流,会在正常文档流之上,也可以通过z-index改为负值在正常流之下
									<br>2.使用top，right，bottom，left等属性进行绝对定位，坐标总是以最近的被定位的父级元素为基准,如没有则以window窗口.
									<br>3.盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
									<br>4.当元素设置为绝对定位时,则该元素变为inline-block块级.（不再占据100%）
									<br>特殊用法：
									<br>1.(未定义坐标)：绝对定位的元素，在top，right，bottom，left属性未设置时，会紧随在其前面的兄弟元素之后，但在位置上不影响常规流中的任何元素。如无兄弟元素则贴在父元素起点。<b>即绝对定位在不赋值位置属性时，可作为脱离文档流的相对定位。</b>
									<br>无依赖的绝对定位主要通过margin来实现位移.
									<br>可配合text-align+&nbsp;；实现一些自动布局。
									<br>关于跟随性,默认会跟在图片的顶端,由于200B baseline对齐会错位,可通过注释或串联来规避
									<br>2.(未知/已知元素尺寸)：垂直/水平/双向居中,可设置绝对定位,并设置top+bottom:0 / left+right:0 /
									top+left+bottom+right:0,并设置对应方向margin:auto【IE8支持，6-7均不支持】
									<br>3.(已知元素尺寸)：垂直/水平/双向居中,可设置绝对定位,并设置单向距离(left:50% /
									top:50%),并设置margin-left/top:-尺寸的一半.【IE6支持】
									<br>4.(自适应宽高)：一个绝对定位元素,如未对其宽高进行设置,但对其对向方位值设置时,则认为宽高总是扩展值定位点.可利用作为自适应宽高.【IE8支持，6-7均不支持】
									<br>BUG：
									<br>1.IE6中,父元素区域会管理到内部包含的绝对定位元素范围.
								</span></li>
							<li><a href="#">position:fixed</a><span>窗口定位：
									<br>对象脱离常规流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
									<br>HACK：
									<br>IE6不支持fixed定位，通过CSS表达式解决，<a
										href="https://www.cnblogs.com/hooray/archive/2011/05/20/2052269.html">完整参考资料</a>
									<br>平板下的fixed有Bug，使用绝对定位代替。
								</span></li>
							<li><a href="#">top/bottom/left/right</a><span>配合定位属性进行定位,可为负值.
									<br>垂直居中一个图片
									<br>#container{display:table-cell;text-align:center;vertical-align:middle;}
								</span></li>
							<li><a href="#">z-index</a><span>Z轴设定,可以为负值.
									<br>同一个层叠上下文中，层叠级别相同的两个元素，依据它们在HTML文档流中的顺序，写在后面的将会覆盖前面的。
									<br>不同层叠上下文中，元素的显示顺序依据祖先的层叠级别来决定，与自身的层叠级别无关。
									<br>在IE浏览器中，定位元素的z-index层级是相对于各自的父级容器，所以会导致z-index出现错误的表现。解决方法是给其父级元素定义z-index，有些情况下还需要定义position:relative。
									<br><a href="https://css.doyoe.com/properties/positioning/z-index.htm">实例参考</a>
								</span></li>
							<li><a href="#">clip</a>
								<span>剪裁,【绝对定位元素】.
									<br>auto,不剪裁.rect(50px 20px 10px auto) auto为不剪裁.【上右下左】
									<br><a href="https://css.doyoe.com/properties/positioning/clip.htm">更多说明</a>
									<br>只有为shape时才支持动画性,可做遮罩动画效果
									<br><a
										href="https://www.w3cplus.com/css3/css-masking.html">webkit-mask-image:url(img.png)</a>
								</span></li>
						</ul>
						<h4>[<span>-</span>]布局</h4>
						<ul style="display:none">
							<li><a href="#">水平居中</a><span>
									1.自动margin(固定尺寸, .x(auto) )
									<br>只适用于水平切为块级元素,margin:0 auto;
									<br>2.text-align:center( 适用于inline/inline-block, .x )
									<br>现代浏览器只对inline/inline-block元素有效,且非绝对定位.IE6-7可对block元素有效(需指定尺寸)
									<br>3.绝对定位( 已知元素尺寸,ct(x,@width) )
									<br>设置绝对定位,left:50%,并设置margin-left:-尺寸的一半
									<br>4.绝对定位( 未知元素尺寸,.ct(x) )
									<br>设置绝对定位,并设置left:0;right:0;margin-left:auto;margin-right:auto; 【IE6不支持】
									<br>5.自动margin(伸缩尺寸,margin:x)
									<br>设置margin:value 对边相等margin值,对盒子宽高未设置则自动扩展宽高
								</span></li>
							<li><a href="#">垂直居中</a><span>
									1.绝对定位( 已知元素尺寸,ct(y,@height) )
									<br>设置绝对定位,top:50%,并设置margin-top:-尺寸的一半
									<br>2.绝对定位( 未知元素尺寸,.ct(y) )
									<br>设置绝对定位,并设置top:0;bottom:0;margin-top:auto;margin-top:auto; 【IE6不支持】
									<br>3.table-cell
									<br>设置display:table-cell;vertical-align:middle;（子元素为inline或inline-block） 【IE6不支持】
									<br>4.display:-webkit-box;-webkit-box-align:center;(手机端<a
										href="https://css.doyoe.com/properties/flexible-box/box-align.htm"></a>)
								</span></li>
							<li><a href="#">中央居中</a><span>
									1.绝对定位( 已知元素尺寸,ct(o,@width,@height) )
									<br>设置绝对定位,top:50%,left:50%,并设置margin-top:-尺寸的一半,margin-left:-尺寸的一半
									<br>2.绝对定位( 未知元素尺寸,.ct )
									<br>设置绝对定位,并设置top:0;bottom:0;left:0;right:0;margin:auto; 【IE6不支持】
									<br>3.自动margin(伸缩尺寸,margin:x)
									<br>设置margin:value 对边相等margin值,对盒子宽高未设置则自动扩展宽高
								</span></li>
							<li><a href="#">尺寸兼容</a><span>
									1.hasLayout概念,ie6的自动管理,如不设置overflow总是自动扩展
									<br>2.当元素设置百分比宽高时,自动继承父级,宽度由于block默认占比100%,即总是不会缺失,但若父级高度自适应,则IE6会继续向上级继承,而现代浏览器则继承当前父级内容实际产生的高度.
									<br>3.IE6的1像素BUG,尽量设置尺寸为偶数或不设置<a
										href="https://www.yuzi.me/Share/ie6qishubug.html">参考资料</a>
									<br>4.IE6-7对百分比小数值例如33.33%解析不正确,因修正为*width:32%
								</span></li>
							<li><a href="#">% + border</a><span>百分比尺寸下border的处理
									<br>1.margin:-2px（hover处理则增加双倍）
									<br>2.box-sizing
									<br>3.calc函数 ~"calc(100% - 50px)"
									<br>4.table布局,width=100%-50(无单位)
								</span></li>
							<li><a href="#">自适应宽度</a><span>自适应宽度
									<br>1.margin:x val,由于默认block宽度占满100%,设置margin即占满剩余宽度【如side float则需要清除3px
									bug,可选择绝对定位】
									<br>2.绝对定位,不设置宽高,left:x起始点,right:x结束点.margin:auto.【IE6不兼容】如为相对浏览器窗口可表达式计算
									<br>3.calc函数 ~"calc(100% - 50px)"
									<br>4.table-cell,根据内容扩展,占满剩余父级空间
									<br>5.改table布局,使用width=100%-50(无单位)
								</span></li>
							<li><a href="#">自适应高度</a><span>自适应高度
									<br>1.绝对定位,不设置宽高,top:x起始点,bottom:x结束点.margin:auto.【IE6不兼容】如为相对浏览器窗口可表达式计算
									<br>2.calc函数 ~"calc(100% - 50px)"
									<br>3.改table布局,使用height=100%-50(无单位)
								</span></li>
							<li><a href="#">水平布局</a><span>水平布局方案
									<br>1.float
									<br>2.inline-block,需设置vertical-align:top,去除inline-block的200B空格.【IE6中要使不断行还必须指定父级高度！】
									<br>3.table-cell(总是等高最高的)【IE6不支持】
									<hr>
									<br>float:错乱,换行不低于上行最高值,不等高
									<br>inline-block:不会错乱,新行整齐,不等高
									<br>table-cell:不会错乱,同行元素必定等高
								</span></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="col">
				<div class="block">
					<h3>动画<span>-</span></h3>
					<div class="contents">
						<h4>[<span>-</span>]2D/3D</h4>
						<ul>
							<li><a href="#">transform</a><span>
									可以用【空格】（非逗号）分隔多个操作,被定义的元素必须为对外表现块级的元素.
									<br>(*老版webkit一定要设置为块，否则内联元素的transfrom和animation无效).
									<br>位移动画闪动问题,可提前加载为0.
								</span></li>
							<li><a href="#">transform-origin</a><span>设置或检索对象以某个原点进行转换,数值或百分比.
									<br>如果提供两个，第一个用于横坐标，第二个用于纵坐标。
									<br>如果只提供一个，该值将用于横坐标；纵坐标将默认为50%。
								</span></li>
							<li>transform:<a href="#">rotate</a><span>旋转[n deg度数]
									<br>transform:rotate(Ndeg) / rotateX(n) / rotateY(n) / rotateZ(n)
									<br>transform:rotate3d(x,y,z,角度)</span></li>
							<li>transform:<a href="#">skew</a><span>倾斜[n deg度数]
									<br>transform:skew(Ndeg / Xdeg,Ydeg) / skewX(n) / skewY(n)</span></li>
							<li>transform:<a href="#">scale</a><span>缩放[n倍数]
									<br>transform:scale(x,y) / scaleX(n) / scaleY(n) / scaleZ(n)
									<br>transform:scale3d(x,y,z)
									<br>默认缩放以中心点为起点,不能用zoom
								</span></li>
							<li>transform:<a href="#">translate</a><span>位移/滑动[n px长度]
									<br>transform:translate(x,y) / translateX(n) / translateY(n)
									<br>transform:translate3d:(x,y,z) <a
										href="https://www.imooc.com/video/1898">案例演示</a></span></li>
							<li>transform:<a href="#">matrix</a><span>矩阵
									<br>transform: matrix(6n)
									<br>transform: matrix3d(16n)</span></li>
							<li><a href="#">transform-style</a><span>规定被嵌套元素如何在 3D 空间中显示。
									<br>flat,子元素将不保留其 3D 位置。
									<br>preserve-3d 子元素将保留其 3D 位置。</span></li>
							<li><a href="#">backface-visibility</a><span>定义元素在不面对屏幕时是否可见。
									<br>取值背面可见/不可见visible|hidden;
									<br>消除 transition 闪屏
									<br> 两个方法
									<br> -webkit-transform-style: preserve-3d;
									<br> /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
									<br> -webkit-backface-visibility: hidden;
									<br> /*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/</span></li>
							<li><a href="#">perspective</a>(n)<span>定义 3D 转换元素的透视视图。
									<br>取值number|none,常用500; <a href="https://www.imooc.com/video/1048">参考资料</a></span>
							</li>
							<li><a href="#">perspective-origin</a>(x,y)<span>规定 3D 元素的底部位置。
									<br>50% 50%默认值,取值left,center,right,length,%</span></li>
						</ul>
						<h4>[<span>-</span>]过渡</h4>
						<ul>
							<li><a href="#">transition</a><span>过渡,简写,属性-时间-缓动-延迟<br>
									在Chrome下，使用过渡效果transition时有时会出现页面闪动<br>
									设置：-webkit-transform-style:preserve-3d;或-webkit-backface-visibility:hidden;</span>
							</li>
							<li><a href="#">transition-property</a><span>过渡的属性,以逗号分割多个</span></li>
							<li><a href="#">transition-duration</a><span>过度所需的时间</span></li>
							<li><a href="#">transition-timing-function</a><span>缓动线：
									<br>linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
									<br>ease： 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
									<br>ease-in： 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
									<br>ease-out： 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
									<br>ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
									<br>cubic-bezier(<number>, <number>, <number>, <number>)： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
													<br><a href="https://jeremyckahn.github.io/stylie/">自定义缓动函数</a> ( <a
														href="https://www.uisdc.com/css-animation-visual-generator-stylie">stylie教程</a>
													)
												</number>
											</number>
										</number>
									</number></span></li>
							<li><a href="#">transition-delay</a><span>延迟时间</span></li>
						</ul>
						<h4>[<span>-</span>]动画</h4>
						<ul>
							<li><a href="#">@keyframes</a><span>定义动画
									<br>keyframes 名称{
									<br>from{}
									<br>to{}
									<br>}
									<br>@keyframes 名称{
									<br>0% {}
									<br>25%{}
									<br>75% {}
									<br>100% {}
									<br>}
									<br>注意写前缀
									<br><b>过渡的动画不能使用简写。例如border:8px solid #fff无效,提前定义样式颜色,并给予0宽度,改变宽度.</b>
									<br><b>利用起点设置为非0%可设置出间隔动画</b>
									<br>不想设置断点的数据留空会线性执行到下一个有数据位置
									<br>设置内层img等于祖层宽度，对子层尺寸进行变化形成遮罩显示效果（需设置overflow:hidden)
								</span></li>
							<li><a href="#">animation</a><span>执行动画
									<br>简写animation:
									<br>name 5s ease-in 1s 8/infinite alternate paused forwards;
									<br>名称 时间 缓动函数 延迟执行 重复次数 反向 暂停 停留在末尾状态;
									<br><b>多个动画之间用【逗号】隔开，不同组动画属性的变化同时执行，可设置延迟达到队列效果，同属性例transform会覆盖</b>
									<br><a href="https://tid.tenpay.com/?p=5983">动画帧数计算</a>
									<a href="https://ecd.tencent.com/css3/tools.html">腾讯工具</a> /
									<a href="https://cssanimate.com/">cssanimate</a> /
									<a href="https://ademilter.com/lab/liffect/">liffect</a> /
									<a href="https://leaverou.github.io/animatable/">简单示例</a> /
									<a href="https://cssload.net/">cssload</a> /
									<a href="https://www.w3cfuns.com/blog-5421655-5400318.html">loading动画</a>
								</span></li>
							<li><a href="#">animation-name</a><span>动画名称</span></li>
							<li><a href="#">animation-duration</a><span>时间</span></li>
							<li><a href="#">animation-timing-function</a><span>缓动函数
									<br><a href="https://www.qianduan.net/css3-animation.html">steps(num)逐帧动画</a></span>
							</li>
							<li><a href="#">animation-delay</a><span>延迟时间</span></li>
							<li><a href="#">animation-iteration-count</a><span>执行次数</span></li>
							<li><a href="#">animation-direction</a><span>animation-direction:reverse / alternate /
									alternate-reverse （反向,奇正偶反,偶正奇反）</span></li>
							<li><a href="#">animation-play-state</a><span>animation-play-state: running / paused
									运行/暂停</span></li>
							<li><a href="#">animation-fill-mode</a><span>animation-fill-mode:none / forwards / backwords
									/ both (返回初始,停留末尾,应用初始,两者)</span></li>
							<li><a href="#">移动端动画</a><span>
									<a
										href="https://github.com/AlloyTeam/Mars/blob/master/performance/high-performance-css3-animation.md">参考资料1</a>
									|
									<a
										href="https://github.com/AlloyTeam/Mars/blob/master/performance/css-property-animation-performance.md">参考资料2</a>
									<br>1.减少BFC属性方式
									<br>2.减少使用阴影与渐变
									<br>3.让动画元素脱离文档流，减少重排
									<br>4.JS中减少layout
								</span></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="col">
				<div class="block">
					<h3>移动端<span>-</span></h3>
					<div class="contents">
						<h4>[<span>-</span>]webkit</h4>
						<ul>
							<li>
								<a href="#">-webkit-text-size-adjust:100%</a>
								<span>开启文字调整（WEBKIT默认最小只支持12px大小字）<br>
									<a href="https://www.document-write.com/archives/1">参考资料</a>
								</span>
							</li>
							<li>
								<a href="#">-webkit-overflow-scrolling:touch</a>
								<span>区域快速回滚 <a
										href="https://blog.csdn.net/hursing/article/details/9186199">参考资料</a></span>
							</li>
							<li><a href="#">-webkit-tap-highlight-color</a><span>*{-webkit-tap-highlight-color: rgba(0,
									0, 0, 0);} <br>
									这个属性只用于iOS
									(iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。
									想要禁用这个高亮，设置颜色的alpha值为0即可。<br>
									<a href="https://www.cnblogs.com/libin-1/p/5903350.html">参考资料</a>
								</span></li>
							<li>
								<a href="#">-webkit-appearance</a>
								<span>
									<a href="https://www.w3cplus.com/blog/271.html">webkit移动表单控件重置</a><br>
									<pre><code data-language="css" class="rainbow">
						<span><br>消除输入框和按钮的原生外观，<br>在iOS上加上这个属性才能给按钮和输入框自定义样式 。<br>注意：不同type的input使用这个属性之后表现不一。<br>text、button无样式，radio、checkbox直接消失</span>
                     <span class="entity name tag">input</span>[<span class="entity name tag">type</span>=<span class="string">"submit"</span>],<span class="entity name tag">input</span>[<span class="entity name tag">type</span>=<span class="string">"reset"</span>],<span class="entity name tag">input</span>[<span class="entity name tag">type</span>=<span class="string">"button"</span>],<span class="entity name tag">button</span> {
                      <span class="support css-property"><span class="support vendor-prefix">-webkit-</span>appearance</span>:<span class="support css-value">none</span>;
                     }
                    </code></pre>
								</span>
							</li>
							<li><a href="#">-webkit-touch-callout:none</a><span>body,防止长按复制图片,ipad+iphone禁用长按页面时的弹出菜单(iOS下有效)
									,img和a标签都要加</span></li>
						</ul>
					</div>
				</div>
				<div class="block">
					<h3>多媒体<span>-</span></h3>
					<div class="contents">
						<h4>[<span>+</span>]媒体查询</h4>
						<ul style="display:none">
							<li>
								<a href="#">viewport</a>
								<span>
									<textarea>                        &lt;meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimal-ui"&gt;
                      </textarea>
									当没有viewport头时，进入平板模拟测试需要提前设置好状态重新进入页面。<br>
									当页面以body作为部分绝对定位参考时，需要设置body相对定位。<br>
									其余设置body或总包裹层最小宽度
								</span>
							</li>
							<li>
								<a href="#">@import</a>
								<span>指定导入的外部样式表及目标媒体。
									<br>@import url('demo.css') screen and (min-width:800px);
									<br>该规则必须在样式表头部最先声明,并且其后的分号是必需的.IE9以前不支持.
								</span>
							</li>
							<li>
								<a href="#">@media</a>
								<span><a href="https://css.doyoe.com/rules/@media.htm">详细资料</a>
									<br>@media [only/not] 媒体类型 [and (媒体特性表达式)] {你的样式}
									<br>例：@media only/not print and (max-width: 1200px){样式代码}
									<br>IE8及以下只能实现CSS2中的部分，即只可以设置媒体类型。
									<br>其中部分支持max&amp;min
								</span>
							</li>
							<li><a href="https://www.w3cplus.com/css3/media-query-snippets.html">media queries
									snippets</a><span>媒体查询片段</span></li>
							<li><a href="https://screensiz.es/phone">Screen Size View</a><span>屏幕尺寸一览</span></li>
						</ul>
						<h4>[<span>-</span>]移动尺寸</h4>
						<ul>
							<li><a href="#">320*480</a> (Android)</li>
							<li><a href="#">480*800</a> (Android)</li>
							<li><a href="#">640*960</a> (iPhone4/4S)</li>
							<li><a href="#">720*1280</a> (Android)</li>
							<li><a href="#">768*1024</a> (iPad2/mini)</li>
							<li><a href="#">1536*2048</a> (iPad3/4)</li>
						</ul>
						<h4>[<span>+</span>]PC尺寸</h4>
						<ul style="display:none">
							<li><a href="#">1024*768</a> (旧LED)</li>
							<li><a href="#">1280*800</a> (笔记本)</li>
							<li><a href="#">1366*768</a> (MAC笔记)</li>
							<li><a href="#">1400*900</a> (17寸/19寸宽屏)</li>
							<li><a href="#">1680*1050</a> (20~22寸宽屏)</li>
							<li><a href="#">1920*1200</a> (23~28寸宽屏)</li>
							<li><a href="#">2560*1600</a> (30寸宽屏)</li>
						</ul>
						<h4>[<span>+</span>]媒体特性</h4>
						<ul style="display:none">
							<li><a href="#">width</a><span>定义输出设备中的页面可见区域宽度</span></li>
							<li><a href="#">height</a><span>定义输出设备中的页面可见区域高度</span></li>
							<li><a href="#">device-width</a><span>定义输出设备的屏幕可见宽度</span></li>
							<li><a href="#">device-height</a><span>定义输出设备的屏幕可见高度</span></li>
							<li><a
									href="#">orientation</a><span>定义'height'是否大于或等于'width'。值portrait代表是(竖屏)，landscape代表否(横屏)</span>
							</li>
							<li><a href="#">aspect-ratio</a><span>定义'width'与'height'的比率</span></li>
							<li><a href="#">device-aspect-ratio</a><span>定义'device-width'与'device-height'的比率。如常见的显示器比率：4/3,
									16/9, 16/10</span></li>
							<li><a href="#">color</a><span>定义每一组输出设备的彩色原件个数。如果不是彩色设备，则值等于0</span></li>
							<li><a href="#">color-index</a><span>定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0</span></li>
							<li><a href="#">monochrome</a><span>定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0</span></li>
							<li><a href="#">resolution</a><span>定义设备的分辨率。如：96dpi, 300dpi, 118dpcm</span></li>
							<li><a href="#">scan</a><span>定义电视类设备的扫描工序</span></li>
							<li><a href="#">grid</a><span>用来查询输出设备是否使用栅格或点阵。只有1和0才是有效值，1代表是，0代表否</span></li>
						</ul>
						<h4>[<span>+</span>]媒体类型</h4>
						<ul style="display:none">
							<li><a href="#">all</a><span>用于所有媒体设备类型</span></li>
							<li><a href="#">screen</a><span>用于计算机显示器</span></li>
							<li><a href="#">print</a><span>用于打印机</span></li>
							<li><a href="#">handheld</a><span>用于小型或手持设备</span></li>
							<li><a href="#">tv</a><span>用于电视类设备(oprea)</span></li>
							<li><a href="#">aural</a><span>用于语音和音乐合成器(oprea)</span></li>
							<li><a href="#">braille</a><span>用于触觉反馈设备(oprea)</span></li>
							<li><a href="#">projection</a><span>用于投影图像，如幻灯片(oprea)</span></li>
							<li><a href="#">tty</a><span>用于使用固定间距字符格的设备。如电传打字机和终端(oprea)</span></li>
							<li><a href="#">embossed</a><span>用于凸点字符（盲文）印刷设备(oprea)</span></li>
						</ul>
						<h4>[<span>+</span>]打印</h4>
						<ul style="display:none">
							<li><a href="#">@page</a><span>设置页面容器的版式，方向，边空等。可增加@page name</span></li>
							<li><a href="#">@page:first</a><span>设置在打印时页面容器第一页使用的样式。</span></li>
							<li><a href="#">@page:left</a><span>设置页面容器位于装订线左边的所有页面使用的样式。</span></li>
							<li><a href="#">@page:right</a><span>设置页面容器位于装订线右边的所有页面使用的样式。</span></li>
							<li><a href="#">page</a><span>检索或指定显示对象容器时使用的页面类型。需要先用@page定义name，调用ele{page:name;}</span>
							</li>
							<li><a href="#">page-break-before</a><span>检索或设置对象之前出现的页分割符。</span></li>
							<li><a href="#">page-break-after</a><span>检索或设置对象之后出现的页分割符。</span></li>
							<li><a href="#">page-break-inside</a><span>检索或设置对象容器内部出现的页分割符。</span></li>
						</ul>
					</div>
				</div>
				<div class="block">
					<h3>LESS<span>+</span></h3>
					<div class="contents" style="display:none">
						<h4>[<span>-</span>]LESS</h4>
						<ul>
							<li><a href="#">@var</a>(color,url)<span>变量(嵌套中识别作用域),集中定义基色等,字符串定义基url(需加引号)</span></li>
							<li><a href="#">@url:'path'-&gt;@{'path/..'}</a><span>字符串变量的引用</span></li>
							<li><a href="#">.inherit(@var1,@var2)</a><span>继承,集中定义重复样式或组合HACK,带参数继承时,多个参数之间用逗号分隔</span>
							</li>
							<li><a href="#">parent{child{} &amp;:hover{}}</a><span>嵌套,层级嵌套,&amp;引用for伪类</span></li>
							<li><a href="https://www.bootcss.com/p/lesscss/#-operations">运算</a><span>数字,颜色,变量都可以参与运算，另外定义一个中间变量接受参数
									@a = @b*100 , .some{@a/2}
								</span></li>
							<li><a href="https://www.bootcss.com/p/lesscss/#-parametric-mixins">swith &amp;
									when</a><span>条件判断,@_所有switch条件公共拥有属性
									<br>iscolor
									<br>isnumber
									<br>isstring
									<br>iskeyword
									<br>isurl
									<br>ispixel
									<br>ispercentage
									<br>isem</span></li>
							<li><a href="#">color函数</a><span>
									<table border="1" cellspacing="0" cellpadding="2">
										<tbody>
											<tr>
												<td valign="top">lighten(@color,10%)</td>
												<td valign="top">明/亮度</td>
											</tr>
											<tr>
												<td valign="top">darken(@color,10%)</td>
												<td valign="top">加深</td>
											</tr>
											<tr>
												<td valign="top">saturate(@color,10%)</td>
												<td valign="top">饱和度</td>
											</tr>
											<tr>
												<td valign="top">desaturate(@color,10%)</td>
												<td valign="top">去色</td>
											</tr>
											<tr>
												<td valign="top">fadein(@color,10%)</td>
												<td valign="top">减少透明度</td>
											</tr>
											<tr>
												<td valign="top">fadeout(@color,10%)</td>
												<td valign="top">增加透明度</td>
											</tr>
											<tr>
												<td valign="top">fade(@color,10%)</td>
												<td valign="top">取透明度</td>
											</tr>
											<tr>
												<td valign="top">spin(@color,10/-10)</td>
												<td valign="top">色盘色调</td>
											</tr>
											<tr>
												<td valign="top">mix(@color1,@color2)</td>
												<td valign="top">混色</td>
											</tr>
											<tr>
												<td valign="top">multiply(@color1,@color2)</td>
												<td valign="top">正片叠底</td>
											</tr>
											<tr>
												<td valign="top">screen(@color1,@color2)</td>
												<td valign="top">滤色</td>
											</tr>
											<tr>
												<td valign="top">overlay(@color1,@color2)</td>
												<td valign="top">叠加</td>
											</tr>
											<tr>
												<td valign="top">softlight(@color1,@color2)</td>
												<td valign="top">柔光</td>
											</tr>
										</tbody>
									</table>
								</span>
							</li>
							<li><a href="#">~避免编译</a><span>~特殊内容,其中包括calc()运算函数在LESS中需要避免编译</span></li>
							<li><a href="#">`JS表达式</a><span>`反单引号`</span></li>
						</ul>
					</div>
				</div>
				<div class="block">
					<h3>其他<span>+</span></h3>
					<div class="contents">
						<h4>[<span>-</span>]Other</h4>
						<ul>
							<li><a href="https://github.com/necolas/normalize.css">Normalize.css</a></li>
							<li><a href="https://iruxu.com/LessLab/">LessLab</a></li>
						</ul>
					</div>
				</div>
				<div class="block">
					<h3>参考资料<span>+</span></h3>
					<div class="contents" style="display:none">
						<h4>[<span>-</span>]参考资料</h4>
						<ul>
							<li><a href="https://www.runoob.com/">菜鸟教程</a></li>
							<li><a href="https://www.w3.org/TR/">W3C</a></li>
							<li><a href="https://css.doyoe.com/">CSS手册</a></li>
							<li><a href="https://less.bootcss.com/">LESS中文</a></li>
							<li><a href="https://bootstrap.css88.com/">Bootstrap推荐</a></li>
							<li><a href="https://www.bootcss.com/">Bootstrap中文</a></li>
							<li><a href="https://getbootstrap.com/">Bootstrap官网</a></li>
							<li><a href="https://w3help.org/zh-cn/causes/">兼容性</a></li>
							<li><a href="https://msdn.microsoft.com/library/hh772401(VS.85)">IE API</a></li>

						</ul>
					</div>
				</div>
			</div>
		</div>

		<div id="jQuery" class="content" style="display:none">
			<ul>
				<li>
					<h3>选择器<span>-</span></h3>
					<div>
						<h4>[<span>-</span>] 基本</h4>
						<ul>
							<li><a href="#">*</a><span>通配</span></li>
							<li><a href="#">#id</a><span>ID</span></li>
							<li><a href="#">.class</a><span>样式</span></li>
							<li><a href="#">tagName</a><span>标签元素名</span></li>
							<li><a href="#">selector1,...,selectorN</a><span>逗号分隔多个</span></li>
						</ul>
						<h4>[<span>-</span>] 层级</h4>
						<ul>
							<li><a href="#">E F</a><span>全后代</span></li>
							<li><a href="#">E&gt;F</a><span>子辈</span></li>
							<li><a href="#">E+F</a><span>相邻</span></li>
							<li><a href="#">E~F</a><span>兄弟</span></li>
						</ul>
						<h4>[<span>-</span>] 序列</h4>
						<ul>
							<li><a href="#">:first</a><span>第一个</span></li>
							<li><a href="#">:last</a><span>最后一个</span></li>
							<li><a href="#">:eq</a>(index)<span>索引第N个</span></li>
							<li><a href="#">:gt</a>(index)<span>索引大于</span></li>
							<li><a href="#">:lt</a>(index)<span>索引小于</span></li>
							<li><a href="#">:even</a><span>索引偶数，实际奇数</span></li>
							<li><a href="#">:odd</a><span>索引奇数，实际偶数</span></li>
						</ul>
						<h4>[<span>-</span>] 条件</h4>
						<ul>
							<li><a href="#">:not</a>(selector)<span>不含,无需引号,not(div,a)或not(div a)</span></li>
							<li><a href="#">:has</a>(selector)<span>含</span></li>
							<li><a href="#">:focus</a><span>获得焦点,有focus方法的,不只是表单</span></li>
							<li><a href="#">:animated</a><span>正在执行动画</span></li>
							<li><a href="#">:hidden</a><span>隐藏的</span></li>
							<li><a href="#">:visible</a><span>可见的</span></li>
							<li><a href="#">:lang</a>(zh-cn)<span>语言指定</span></li>
						</ul>
						<h4>[<span>-</span>] 内容</h4>
						<ul>
							<li><a href="#">:root</a><span>等价html</span></li>
							<li><a href="#">:header</a><span>H1~H6</span></li>
							<li><a href="#">:target</a><span>HASH目标元素</span></li>
							<li><a href="#">:contains</a>(text)<span>包含文本</span></li>
							<li><a href="#">:empty</a><span>空/无子元素</span></li>
							<li><a href="#">:parent</a><span>有子元素</span></li>
						</ul>
						<h4>[<span>-</span>] 属性</h4>
						<ul>
							<li><a href="#">[att]</a><span>含属性</span></li>
							<li><a href="#">[att=val]</a><span>为..</span></li>
							<li><a href="#">[att!=val]</a><span>不为..</span></li>
							<li><a href="#">[att^=val]</a><span>以..开始</span></li>
							<li><a href="#">[att$=val]</a><span>以..结束</span></li>
							<li><a href="#">[att*=val]</a><span>含..(str)</span></li>
							<li><a href="#">[att1][attN]</a><span>同时满足..</span></li>
						</ul>
						<h4>[<span>+</span>] 子元素</h4>
						<ul style="display:none">
							<li><a href="#">:first-child</a><span>第一个子元素</span></li>
							<li><a href="#">:first-of-type</a><span>父元素中第一个此类元素</span></li>
							<li><a href="#">:last-child</a><span></span>最后一个子元素</li>
							<li><a href="#">:last-of-type</a><span>父元素中最后一个此类元素</span></li>
							<li><a href="#">:nth-child(n)</a><span>第N个子元素</span></li>
							<li><a href="#">:nth-of-type(n)</a><span>父元素中第N个此类元素</span></li>
							<li><a href="#">:nth-last-child(n)</a><span>倒数第N个子元素</span></li>
							<li><a href="#">:nth-last-of-type(n)</a><span>父元素中倒数第N个此类元素</span></li>
							<li><a href="#">:only-child</a><span>唯一子元素</span></li>
							<li><a href="#">:only-of-type</a><span>唯一同类子元素</span></li>
						</ul>
						<h4>[<span>+</span>] 表单</h4>
						<ul style="display:none">
							<li><a href="#">:input</a><span>所有input</span></li>
							<li><a href="#">:text</a><span>type为text</span></li>
							<li><a href="#">:password</a><span>type为password</span></li>
							<li><a href="#">:radio</a><span>type为radio</span></li>
							<li><a href="#">:checkbox</a><span>type为checkbox</span></li>
							<li><a href="#">:submit</a><span>type为submit</span></li>
							<li><a href="#">:image</a><span>type为image</span></li>
							<li><a href="#">:reset</a><span>type为reset</span></li>
							<li><a href="#">:button</a><span>type为button</span></li>
							<li><a href="#">:file</a><span>type为file</span></li>
							<li><a href="#">:hidden</a><span>type为hidden</span></li>
						</ul>
						<h4>[<span>-</span>] 表单对象属性</h4>
						<ul>
							<li><a href="#">:enabled</a><span>所有可用</span></li>
							<li><a href="#">:disabled</a><span>所有禁用</span></li>
							<li><a href="#">:checked</a><span>所有被多选/单选选中元素</span></li>
							<li><a href="#">:selected</a><span>所有被下拉选中元素</span></li>
						</ul>
					</div>
				</li>
			</ul>
			<ul>
				<li>
					<h3>核心<span>-</span></h3>
					<div>
						<h4>[<span>-</span>] 基本</h4>
						<ul>
							<li><a href="#">$(selector)</a>
								<span>返回匹配的元素集合
									<br>
									<div><b>传入参数</b>
										<div>
											<table width="100%" border="1" cellspacing="0" cellpadding="2">
												<tbody>
													<tr>
														<td valign="top">selector,[context]</td>
														<td valign="top">选择器表达式,查找范围：返回选择器对象的引用对象

															$('div.foo').click(function() {
															$('span', this).addClass('bar'); // 限定查找范围
															});</td>
													</tr>
													<tr>
														<td valign="top">HttpTags,[props]</td>
														<td valign="top">创建DOM元素,元素属性：返回包含了这些DOM元素引用的JQ对象

															$("&lt;div/&gt;", {
															"class": "test",
															text: "Click me!",
															click: function(){
															$(this).toggleClass("test");
															}
															}).appendTo("body");</td>
													</tr>
													<tr>
														<td valign="top">element / elementArray</td>
														<td valign="top">DOM 元素或 DOM元素数组：&nbsp;返回DOM封装到 jQuery 对象

															$('div.foo').click(function() {
															$(this).slideUp();
															});</td>
													</tr>
													<tr>
														<td valign="top">object</td>
														<td valign="top">普通 JavaScript 对象：封装成jQuery 对象并返回

															// 定义一个普通 JavaScript 对象
															var foo = {foo:'bar', hello:'world'};
															// 封装成 jQuery 对象
															var $foo = $(foo);
															// 绑定一个事件
															$foo.on('custom', function (){
															console.log('custom event was called');
															});
															// 触发这个事件
															$foo.trigger('custom');</td>
													</tr>
													<tr>
														<td valign="top">callback</td>
														<td valign="top"><b><span style="color: #e30000;">如果传入一个函数，则在
																	document 上绑定一个 ready 事件监听函数，当 DOM 结构加载完成时执行。</span>
															</b>
															jQuery(function($) {
															// 你可以在这里继续使用$作为别名...
															});</td>
													</tr>
													<tr>
														<td valign="top">jQuery Object</td>
														<td valign="top">如果传入一个 jQuery 对象，则创建该 jQuery
															对象的一个副本并返回，副本与传入的jQuery 对象引用完全相同的 DOM 元素。</td>
													</tr>
													<tr>
														<td valign="top">空</td>
														<td valign="top">返回一个空的jQuery对象。</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
									<a href="https://jquery.bootcss.com/jQuery/">more info »</a>
								</span></li>
							<li><a href="#">.length</a>(.size())<span>jQuery 对象中元素的个数</span></li>
							<li><a href="#">.index([sel])</a><span>
									<br>无参数，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。
									<br>如果参数是一组DOM元素或者jQuery对象，那么返回值就是传递的元素相对于原先集合的位置。
									<br>如果参数是一个选择器，那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素，则返回-1。</span></li>
							<li><a href="#">.get(index)/[index]</a><span>取得其中一个匹配的元素</span></li>
							<li><a href="#">.each</a>(fn[i,ele])
								<span>静态方法 jQuery.each() 是一个通用的遍历迭代方法，用于无缝地遍历对象和数组。
									<br>对于数组和含有 length 属性的类数组对象（如函数参数对象 arguments） ，该方法通过下标遍历，从 0 到 length-1 ；
									<br>对于其他对象则通过属性名遍历（for-in） 。
									<br>在遍历过程中，如果回调函数返回 false，则结束遍历。
									<br>函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）
									<br>返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。
									<br>返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。
									<br>.each()
									方法用来让DOM循环结构更简单更不易出错。它会迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。更重要的是，回调函数是在当前DOM元素为上下文的语境中触发的。因此关键字
									this 总是指向这个元素。
								</span></li>
							<li><a href="#">.toArray()</a>
								<span>
									把jQuery集合中所有DOM元素恢复成一个数组。
								</span></li>
							<li><a href="#">jQuery.noConflict()</a><span>
									<a href="https://jquery.bootcss.com/jQuery.noConflict/">more info »</a>
									<br>关于命名
									<br>1.将 jQuery 库在 Base 库之前引入，那么“$”的所有权就归 Base 库所有，而 jQuery 可以直接用 jQuery
									对象调用，或者创建一个“$$”符给 jQuery 使用。
									<br>var $$ = jQuery; //创建一个$$的 jQuery 对象
									<br>$(function () { //这是 Base 的$
									<br>alert($('#box').ge(0)); //这是 Base 的$
									<br>alert($$('#box').width()); //这是 jQuery 的$$
									<br>});
									<br>2.如果将 jQuery 库在 Base 库之后引入， 那么 “$” 的所有权就归 jQuery 库所有， 而 Base库将会冲突而失去作用。这里，jQuery
									提供了一个方法：
									<br>jQuery.noConflict(); //将$符所有权剔除
									<br>var $$ = jQuery;
									<br>$(function () {
									<br>alert($('#box').ge(0));
									<br>alert($$('#box').width());
									<br>});
									<br>3.继续内部使用$作为参数：
									<br>jQuery.noConflict(); //将$符所有权剔除
									<br>jQuery(function ($) {
									<br>alert($('#box').ge(0));
									<br>});</span></li>
						</ul>
						<h4>[<span>-</span>] 数据</h4>
						<ul>
							<li><a href="#">.date()</a><span>在匹配元素上存储任意相关数据 或 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值<br><a
										href="https://jquery.bootcss.com/data/">more info »</a></span></li>
							<li><a href="#">.removeDate()</a>
								<span>.removeData()方法允许我们移除用.data()绑定的值。
									<br>当带name参数调用的时候，.removeData()<br>将删除那个特有的值，当不带任何参数的时候，所有的值将被移除。
									<br>从jQuery的内部.data() 缓存不影响任何在文档中的HTML5的data-属性，使用.removeAttr()可以移除这些属性。
									<br>当使用.removeData("name")时，如果没有这个属性名字是在内部数据缓存，jQuery将试图在元素上找到一个 data-的属性。
									<br>为了避免重复查询 data- 属性，将这个名称设置为无论是null 或 undefined的值(例如 .data("name",
									undefined))，而不是使用.removeData()。<br><a
										href="https://jquery.bootcss.com/removeData/">more info »</a></span></li>
						</ul>
						<h4>[<span>-</span>] 队列</h4>
						<ul>
							<li><a href="#">.queue</a>([name],fn[next])<span>无名称则为fx动画队列,返回第一个元素关联的函数队列或修改</span></li>
							<li><a href="#">.dequeue</a>([name])<span>出队(移除)并执行元素函数队列的下一个函数（非动画函数需要手动调用dequeue）</span>
							</li>
							<li><a href="#">.delay</a>(time,[name])<span>延迟</span></li>
							<li><a href="#">.clearQueue</a>()<span>移除队列</span></li>
						</ul>
						<h4>[<span>-</span>] 插件</h4>
						<ul>
							<li><a href="#">jQuery.extend</a>(obj)<span><a
										href="https://hemin.cn/jq/jQuery.extend_object.html">ex</a></span></li>
							<li><a href="#">jQuery.fn.extend</a>(arg)<span><a
										href="https://hemin.cn/jq/jQuery.fn.extend.html">ex</a>
									<pre><code data-language="javascript" class="rainbow">
      ;(<span class="keyword">function</span>($){
      <span class="selector"> $</span>.fn.<span class="function call">extend</span>({
         <span class="string">'method'</span>:<span class="keyword">function</span>(){
           <span class="comment">//some code</span>
           <span class="keyword">return</span> <span class="keyword">this</span>;
         }
       })
      })(jQuery);
      </code></pre>
									<br>JQ插件中的this就是已经封装过的元素是JQ对象，在JQ插件内部进行JQ方法中的This是DOM元素需要自己再封装
								</span></li>
						</ul>
					</div>
				</li>

				<li>
					<h3>工具<span>-</span></h3>
					<div>
						<h4>[<span>-</span>] 数组/对象操作</h4>
						<ul>
							<li><a href="#">$.each</a>(obj,fn[i,val])
								<span>遍历执行对象/数组,回调函数i为数组索引index或对象属性name,val为原值
									<br>不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。
									回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。
									如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。

									<br><a href="https://jquery.bootcss.com/jQuery.each/">more info »</a>
								</span></li>
							<li><a href="#">$.map</a>(obj,fn[val,i])
								<span>遍历执行对象/数组,this为全局window对象,返回新的对象/数组
									<br><a href="https://jquery.bootcss.com/jQuery.map/">more info »</a>
								</span></li>
							<li><a href="#">$.grep</a>(arr,fn[ele,index])
								<span>数组过滤,原始数组不受影响.回调函数ele为元素,index为索引
									<br><a href="https://jquery.bootcss.com/jQuery.grep/">more info »</a>
								</span></li>
							<li><a href="#">$.inArray</a>(val,arr,fromi)
								<span>数组元素查找,类似indexOf,没有返回-1
									<br><a href="https://jquery.bootcss.com/jQuery.inArray/">more info »</a>
								</span></li>
							<li><a href="#">$.merge</a>(arr1,arr2)
								<span>数组合并
									<br>第一个用于合并的数组，其中将会包含合并后的第二个数组的内容。
									<br>第二个用于合并的数组，该数组不会被修改，其中的内容将会被合并到第一个数组中。
									<br><a href="https://jquery.bootcss.com/jQuery.merge/">more info » </a>
								</span></li>
							<li><a href="#">$.unique</a>(arrDOM)
								<span>数组DOM重复元素删除
									<br>排序数组，并移除任何重复的节点。 如果一个节点和已经在数组中的节点完全相同，那么它被认为是重复的; 两个不同的节点具有相同的属性是被认为不重复的.
								</span></li>
						</ul>
						<h4>[<span>-</span>] 测试操作</h4>
						<ul>
							<li><a href="#">$.type</a>(data)<span>判断数据类型</span></li>
							<li><a href="#">$.isWindow</a>(data)<span>判断数据是否为 window 对象</span></li>
							<li><a href="#">$.isNumeric</a>(data)<span>判断数据是否为数值</span></li>
							<li><a href="#">$.isArray</a>(obj)
								<span>判断是否为数组对象，是返回 true</span>
							</li>
							<li><a href="#">$.isFunction</a>(obj)
								<span>判断是否为函数，是返回 true</span>
							</li>
							<li><a href="#">$.isEmptyObject</a>(obj)
								<span>判断是否为空对象，是返回 true</span>
							</li>
							<li><a href="#">$.isPlainObjet</a>(obj)
								<span>判断是否为纯粹对象，是返回 true
									<br>通过 "{}" 或者 "new Object" 创建的</span></li>
							<li><a href="#">$.contains</a>(obj)
								<span>判断 DOM 节点是否含另一个 DOM 节点， 是返回 true</span>
							</li>
						</ul>
						<h4>[<span>-</span>] 其他</h4>
						<ul>
							<li><a href="#">$.now()</a><span>$.now()方法是表达式(new Date).getTime()返回数值的一个简写</span></li>
							<li><a href="#">$.trim(str)</a><span>等同字符串trim()方法,去掉前后空格</span></li>
							<li><a
									href="#">$.noop</a><span>一个空函数<br>当你仅仅想要传递一个空函数的时候，就用他吧。<br>这对一些插件作者很有用，当插件提供了一个可选的回调函数接口，那么如果调用的时候没有传递这个回调函数，就用jQuery.noop来代替执行。</span>
							</li>
							<li><a href="#">$.proxy</a>(obj,fn)<span>调整this指针
									<br><a href="https://jquery.bootcss.com/jQuery.proxy/">more info »</a></span></li>
						</ul>
					</div>
				</li>
			</ul>
			<ul>
				<li>
					<h3>属性<span>-</span></h3>
					<div>
						<h4>[<span>-</span>] 属性</h4>
						<ul>
							<li><a href="#">attr</a>({key,[val|fn]})<span>attr('key')
									获取第一个元素指定属性的值,如遍历获取则需each<br>attr('key','value')
									设置key的值为value<br>attr('key',fn[index,old-value]) 回调参数:索引,原值
									<br>attr({key1:'value1',key2:'value2'}) 设置多个属性的值,用逗号分隔</span></li>
							<li><a href="#">removeAttr</a>(key)<span>removeAttr('key') 从每一个匹配的元素中删除某个属性</span></li>
							<li><a href="#">prop</a>({key,[true/false|fn]})<span>prop('key') 获取匹配元素中第一个元素的属性<br>
									prop('key',true/false) 设置每一个匹配元素的一个属性<br>
									prop('key',fn[index,old-value]) 回调参数:索引,原值 <br> prop({key1:'value1',key2:'value2'})"
								</span></li>
							<li><a href="#">removeProp</a>(key)<span>removeProp('key') 从每一个匹配的元素中删除某个属性</span></li>
						</ul>
						<h4>[<span>-</span>] CSS类</h4>
						<ul>
							<li><a href="#">addClass</a>(class|fn)<span>addClass('name') 添加一个样式<br>
									addClass('name1 name2') 添加多个样式,空格分开<br>
									addClass(fn[index,old-value]) 回调参数:索引,原样式名;返回一个或空格隔开的class名</span></li>
							<li><a href="#">removeClass</a>(class|fn)<span>removeClass('name') 移除一个样式<br>
									removeClass('name1 name2') 移除多个样式,空格分开<br> removeClass(fn[index,old-value])
									回调参数:索引,原样式名;返回一个或空格隔开的class名</span></li>
							<li><a href="#">toggleClass</a>(class|fn[,sw])<span>toggleClass('name')
									元素如果存在（不存在）就删除（添加）一个类<br> toggleClass('name',switch)
									要切换的CSS类名,用于决定元素是否包含class的switch case值<br> toggleClass(fn[index,old-value],switch)
									回调参数:索引,原样式名;返回一个或空格隔开的class名</span></li>
						</ul>
						<h4>[<span>-</span>] HTML代码/文本/值</h4>
						<ul>
							<li><a href="#">html</a>([text|fn])<span>html() 无参数,返回元素集合中第一个元素的内容<br> html('text')
									设置所有选择器元素的内容<br> html(fn[index,old-value]) 返回一个HTML字符串,回调参数:索引,原先的HTML值 <br>
									*限HTML/XHTML </span></li>
							<li><a href="#">text</a>([text|fn])<span>text() 无参数,返回元素集合中第一个元素的内容<br> text('text')
									设置所有选择器元素的内容<br> text(fn[index,old-value]) 返回字符串,回调参数:索引,原先的值 <br> *可用于XML </span>
							</li>
							<li><a href="#">val</a>([val|fn|arr])<span>val() 无参数,返回元素集合中第一个元素的值<br> val('text')
									设置所有选择器元素属性值<br> val(fn[index,old-value]) 返回要设置的值,回调参数:索引,原先的值 <br> val('value')
									设定一个select/checkbox的值<br> val(['value1','value2']) 设定多选时的多个select/checkbox的值</span>
							</li>
						</ul>
					</div>
				</li>
				<li>
					<h3>CSS<span>-</span></h3>
					<div>
						<h4>[<span>-</span>] CSS</h4>
						<ul>
							<li><a href="#">css</a>({key,[val|fn]})<span>css('key') 获取第一个元素的样式值<br> css('key','value')
									设置每一个匹配元素一个指定的样式<br> prop('key',fn[index,old-value]) 回调参数:索引,原值 <br>
									css({key1:'value1',key2:'value2'})
									设置每一个匹配元素多个指定的样式<br>*<b>坐标和尺寸注意加px单位,属性值加引号!</b></span></li>
							<li><a href="#">jQuery.cssHooks</a></li>
						</ul>
						<h4>[<span>-</span>] 元素位置[!px]</h4>
						<ul>
							<li><a href="#">offset()</a>.l/t<span>offset() 计算元素在视窗中的坐标,返回值对对象<br> offset().left
									获得元素视窗水平坐标<br> offset().top 获得元素视窗垂直坐标<br> <b>*offset()值已包含scroll后实际视窗位置</b> </span>
							</li>
							<li><a href="#">offset</a>({top:y,left:x})<span>offset({top:y,left:x}) 设置元素视窗坐标<br>
									*计算的坐标以元素外围为起始点，包含padding和border，不包含margin<br> *设置值对时不需要引号，且不带单位</span></li>
							<li><a href="#">position()</a>.l/t [!arg]<span>position() 获取相对父元素的偏移值对对象<br> position().left
									水平位移<br> position().top 垂直位移<br> *<b>不能用于设置，只能获取，可通过获取后设置新的变量值赋值给css</b><br>
									*计算的坐标以元素外围为起始点，包含padding和border，不包含margin<br> *注意Body清空padding margin否则继承出问题</span>
							</li>
							<li><a href="#">scrollTop</a>([y])<span>获取/设置匹配元素相对滚动条垂直的偏移<br>
									通过offset可获取元素位置,设置$(document).scrollTop(num)跳转至对应锚点<br>
								</span></li>
							<li><a href="#">scrollLeft</a>([x]) <span>获取/设置匹配元素相对滚动条水平的偏移</span></li>
						</ul>
						<h4>[<span>-</span>] 指针位置</h4>
						<ul>
							<li><a href="#">e.pageX</a><span>鼠标指针所在文档位置,已计算scroll
									<br>event.screenX 原生JS:鼠标指针所在显示屏位置
									<br>event.screenY 原生JS:鼠标指针所在显示屏位置
									<hr>
									<br>event.clientX
									原生JS:鼠标指针所在视窗位置,非文档位置<br>计算文档位置：event.clientX+document.documentElement.scrollLeft ||
									document.body.scrollLeft
									<br>event.clientY
									原生JS:鼠标指针所在视窗位置,非文档位置<br>计算文档位置：event.clientY+document.documentElement.scrollTop ||
									document.body.scrollTop
									<hr>
									<br>clientWidth=document.documentElement.clientWidth||
									document.body.clientWidth<br>在页面上返回内容的可视宽度（不包括边框，边距或滚动条）
									<br>clientHeight= document.documentElement.clientHeight|| document.body.clientHeight
									<br> 在页面上返回内容的可视高度（不包括边框，边距或滚动条）
									<hr>
									<br>scrollWidth=document.documentElement.scrollWidth|| document.body.scrollWidth
									<br> 返回元素的整个宽度（包括带滚动条的隐蔽的地方）
									<br>scrollHeight=document.documentElement.scrollHeight|| document.body.scrollHeight
									<br> 返回整个元素的高度（包括带滚动条的隐蔽的地方）
								</span></li>
							<li><a href="#">e.pageY</a><span>鼠标指针所在文档位置,已计算scroll</span></li>
						</ul>
						<h4>[<span>+</span>] 元素尺寸</h4>
						<ul style="display:none">
							<li><a href="#">height</a>([val|fn])<span>height() 无参数,获取第一个元素的高度<br> height(y)
									设置所有元素的高度,无单位 height(fn[index,old-value]) 回调参数:索引,原值.返回一个数值</span></li>
							<li><a href="#">width</a>([val|fn])<span>width() 无参数,获取第一个元素的宽度<br> width(x) 设置所有元素的宽度,无单位
									width(fn[index,old-value]) 回调参数:索引,原值.返回一个数值</span></li>
							<li><a href="#">innerHeight</a>([y])<span>获取/设置内高，含padding，不含边框和margin </span></li>
							<li><a href="#">innerWidth</a>([x])<span>获取/设置内宽，含padding，不含边框和margin</span></li>
							<li><a href="#">outerHeight</a>([y])<span>获取/设置外高,含padding,border,margin</span></li>
							<li><a href="#">outerWidth</a>([x])<span>获取/设置外宽,含padding,border,margin</span></li>
						</ul>
					</div>
				</li>
				<li>
					<h3>效果<span>-</span></h3>
					<div>
						<h4>[<span>-</span>] 基本</h4>
						<ul>
							<li><a href="#">show</a>([time,fn])<span>显示</span></li>
							<li><a href="#">hide</a>([time,fn])<span>隐藏</span></li>
							<li><a href="#">toggle</a>([time,fn])<span>开关</span></li>
							<li><a href="#">ani</a>(arg..callee)<span>A.ani(fnX function(){$(this).pre/next.ani(fnX)}
									<br>
									A.ani(function(){$(this).pre/next.ani(arguments.callee)})<br>
									所有动画额外参数:(回调函数前) linear匀速,swing缓动(默认)</span></li>
						</ul>
						<h4>[<span>-</span>] 滑动</h4>
						<ul>
							<li><a href="#">slideDown</a>([time,fn])<span>向下展开</span></li>
							<li><a href="#">slideUp</a>([time,fn])<span>向上折叠</span></li>
							<li><a href="#">slideToggle</a>([time,fn])<span>滑块开关</span></li>
						</ul>
						<h4>[<span>-</span>] 隐现</h4>
						<ul>
							<li><a href="#">fadeIn</a>([time,fn])<span>淡入</span></li>
							<li><a href="#">fadeOut</a>([time,fn])<span>淡出</span></li>
							<li><a href="#">fadeTo</a>([time,0-1,fn])<span>变换到指定透明度</span></li>
							<li><a href="#">fadeToggle</a>([time,fn])<span>淡入淡出切换</span></li>
						</ul>
						<h4>[<span>-</span>] 自定义/队列</h4>
						<ul>
							<li><a href="#">animate</a>({arg},time,[fn])<span>$(ele).animate({css:'value'},speed,fn)<br>
									$(ele).animate({css:+-some},speed,fn)<br>
									<b>单属性不能像css那样,简写！</b><br>
									<br>百分比不是一个整数,是字符串应添加引号!
									可以通过在属性值前面指定+=或-=来让元素做相对运动(注意是+=,而不是+,需要赋值)<br>
									<b>注意：所有指定的属性必须用骆驼形式</b><br>
									队列动画:<br>
									1.回调函数嵌套<br>
									2.连缀（同一目标）<br>
									3.顺序（同一目标）<br></span></li>
							<li><a href="#">queue</a>(next)<span>支持连缀或非连缀<br>
									实现队列动画赋参数next,并在末尾执行next() <br>
									或不传参数在末尾添加$(this).dequeue() <br>
									当通过队列添加方法后再次连缀执行的动画如为基本动画(hide,show,toggle)必须赋参数!<br>
									取得当前+后续的队列动画长度,queue('fx').length</span></li>
							<li><a href="#">clearQueue()</a><span>清理列队的功能方法：.clearQueue()。<br>
									把它放入一个列队的回调函数或.queue()方法里，就可以把剩下为执行的列队给移除。<br>
									<b>*而非在连缀中书写！</b></span></li>
							<li><a href="#">stop</a>([true],[true])<span>无参数: <br>
									普通动画,暂停动画,恢复动画后继续完成动画<br>
									列队动画,停止列队动画中的第一个动画,并停留在停止时的位置<br>
									有参数：<br>
									第一个参数:true,停止并清除后续队列动画,默认为false<br>
									第二个参数:true,停止并立即跳到动画完成所在的位置(中间队列进行的特性改变等不执行)</span></li>
							<li><a href="#">finish()</a><span>类同stop,但会导致所有排队的动画的CSS属性跳转到他们的最终值。</span></li>
							<li><a href="#">delay</a>(time,[fx])<span>延迟,支持连缀,时间参数</span></li>
						</ul>
						<h4>[<span>-</span>] 设置</h4>
						<ul>
							<li><a href="#">jQuery.fx.interval</a><span>设置每秒运行的帧数,默认13,数值越大频率越慢</span></li>
							<li><a href="#">jQuery.fx.off</a><span>关闭所有动画效果,关闭true,开启false</span></li>
						</ul>
					</div>
				</li>
			</ul>
			<ul>
				<li>
					<h3>文档处理<span>-</span></h3>
					<div>
						<h4>[<span>-</span>] 内部插入</h4>
						<ul>
							<li><a href="#">append()</a><span></span></li>
							<li><a href="#">appendTo()</a><span>如果jquery选择器中的元素不存在,则会创建,直接appendTo目标元素即可。</span></li>
							<li><a href="#">prepend()</a><span></span></li>
							<li><a href="#">prependTo()</a><span></span></li>
						</ul>
						<h4>[<span>-</span>] 外部插入</h4>
						<ul>
							<li><a href="#">after()</a><span></span></li>
							<li><a href="#">insertAfter()</a><span></span></li>
							<li><a href="#">before()</a><span></span></li>
							<li><a href="#">insertBefore()</a><span></span></li>
						</ul>
						<h4>[<span>-</span>] 替换</h4>
						<ul>
							<li><a href="#">replaceWith</a>(content|fn|$)<span></span></li>
							<li><a href="#">replaceAll</a>($|selector)<span></span></li>
							<li><a href="#">end()</a><span></span></li>
							<li>[ 主动插入与替换会先注销原节点 ]</li>
						</ul>
						<h4>[<span>-</span>] 复制删除</h4>
						<ul>
							<li><a href="#">clone</a>([true/false])<span>复制节点,true复制事件处理程序,false不复制 </span></li>
							<li><a href="#">remove</a>([expr])<span>删除A或满足某条件的A,移除事件,返回被删除的节点 </span></li>
							<li><a href="#">detach</a>([expr])<span>删除A或满足某条件的A,保留事件,返回被删除的节点</span></li>
							<li><a href="#">empty()</a><span>删除A所有子节点,不接收参数 </span></li>
						</ul>
						<h4>[<span>-</span>] 包裹</h4>
						<ul>
							<li><a href="#">wrap</a>(html|ele|fn)<span>对每个元素外层逐层包裹</span></li>
							<li><a href="#">wrapInner</a>(html|ele|fn)<span>对每个元素内部逐层包裹 </span></li>
							<li><a href="#">wrapAll</a>(html|ele)<span>对所有匹配元素外层整体包裹 </span></li>
							<li><a href="#">unwrap()</a><span>移除一层包裹,从最内包裹层脱起,多个移除则需移除多次,无参数</span></li>
						</ul>
					</div>
				</li>
				<li>
					<h3>筛选<span>-</span></h3>
					<div>
						<h4>[<span>-</span>] 层级筛选</h4>
						<ul>
							<li><a href="#">find()</a><span>等价后代选择器E F</span></li>
							<li><a href="#">children()</a><span>等价子代选择器</span></li>
							<li><a href="#">next()</a><span>
									next() / nextall() / nextUntil()
									<br>类似E+F 但只返回后面那个紧邻的同辈元素/所有/直到但不包含
								</span></li>
							<li><a href="#">parent()</a><span>
									offsetParent() 返回第一个匹配元素用于定位的父节点
									<br>parent() / parents() / parentsUntil()
									取得一个包含着所有匹配元素的唯一父元素的元素集合/所有（不包含根元素）/直到但不包含
								</span></li>
							<li><a href="#">prev()</a><span>
									prev() / prevall() / prevUntil()
									<br>取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合/所有/直到某个但不包含
								</span></li>
							<li><a href="#">siblings</a>([expr])<span>
									取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合
								</span></li>
						</ul>
						<h4>[<span>-</span>] 序列筛选</h4>
						<ul>
							<li><a href="#">first()</a><span>第一个</span></li>
							<li><a href="#">last()</a><span>最后一个</span></li>
							<li><a href="#">eq</a>(index|-index)<span>第N个/倒数第N个</span></li>
							<li><a href="#">slice</a>(start,[end])<span>第N~M个</span></li>
						</ul>
						<h4>[<span>-</span>] 条件过滤</h4>
						<ul>
							<li><a href="#">filter</a>(expr|obj|ele|fn)<span></span></li>
							<li><a href="#">has</a>(expr|ele)<span></span></li>
							<li><a href="#">not</a>(expr|ele|fn)<span></span></li>
							<li><a href="#">contents()</a><span>查找匹配元素内部所有的子节点（包括文本节点）</span></li>
						</ul>
						<h4>[<span>-</span>] 串联</h4>
						<ul>
							<li><a href="#">add</a>(e|e|h|o[,c])<span></span></li>
							<li>addBack()<a href="#"></a><span></span></li>
						</ul>
						<h4>[<span>-</span>] 检测</h4>
						<ul>
							<li><a href="#">is</a>(selector)<span>根据选择器、DOM元素或 jQuery
									对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
									<br>$("#checbox").is(:checked)</span></li>
							<li><a
									href="#">hasClass</a>(class)<span>检查当前的元素是否含有某个特定的类，如果有，则返回true。里面只写class名称不要加点</span>
							</li>
						</ul>
					</div>
				</li>
			</ul>
			<ul>
				<li>
					<h3>事件<span>-</span></h3>
					<div>
						<h4>[<span>-</span>] 事件处理</h4>
						<ul>
							<li><a href="#">on</a>(type,[sel],[data],fn)<span><b>事件绑定</b>：<br>
									on('type',[data],fn) 绑定一个事件处理函数<br>
									on('type1 type2',[data],fn) 为多个事件绑定一个处理函数<br>
									on({type1:fn1,type2:fn2}) 为多个事件绑定不同的处理函数<br>
									on('type',[data],false) 取消默认行为和冒泡,注意在表单中取消的目标是form而非submit行为!<br>
									on('type.namespace',[...,fn]) 绑定指定命名空间事件<br>
									on('itype',...,fn).trigger() 绑定一个自定义事件加载时默认触发一次<br>
									<b>事件委托</b>：<br>
									$(parent).on('type','selector',[data],fn)<br>
									*<strong>事件委托时的selector为parent的子元素选择器</strong><br>
									*依旧绑定在指定父元素上,触发目标写在第2个参数,data数据在第3个参数 <br>
									<b>*selector必须为选择器字符串,不可传递冗余复杂的CSS表达式变量!内部this是指选择器触发元素!</b></span></li>
							<li><a href="#">off</a>(type,[sel],[fn])<span><b>事件移除</b>：<br>
									off() 无参数删除所有事件绑定<br>
									off('type') 删除某个事件<br>
									off('type',fn) 删除指定事件和处理函数<br>
									<b>取消事件委托</b>：<br>
									off() 无参数,删除所有委托事件<br>
									off('type') 删除所有type事件<br>
									off('type','selector') *注意委托元素写在第2个参数，删除指定目标的一个或多个事件委托,事件类型由空格分隔<br>
									off('type','selector',fn) 删除指定的事件触发的执行函数<br>
									off('type.namespace',[...,fn]) 删除指定命名空间事件</span></li>
							<li><a href="#">one</a>(type,[sel],[data],fn)<span>类似on,但仅触发一次的事件!</span></li>
						</ul>
						<h4>[<span>+</span>] 旧事件处理</h4>
						<ul style="display:none">
							<li><a href="#">bind</a>({type,[data],fn})<span>bind('type',fn) 绑定一个事件处理函数<br>
									bind('type1 type2',fn) 为多个事件绑定一个处理函数<br>
									bind({type1:fn1,type2:fn2}) 为多个事件绑定不同的处理函数<br>
									bind(type,false) 取消默认行为和冒泡,注意取消的目标是form而非submit行为!</span></li>
							<li><a href="#">unbind</a>([type,fn])<span>unbind() 删除所有事件绑定<br>
									unbind('type') 删除某个事件<br>
									unbind('type',fn) 删除指定事件和处理函数</span></li>
							<li><a href="#">delegate</a>(ele,type,[d],fn)<span>在统一级父元素上绑定事件，分配给触发事件的目标。<br>
									1.在 DOM 中很多元素绑定相同事件时；<br>
									2.在 DOM 中尚不存在即将生成的元素绑定事件时；<br>
									我们推荐使用事件委托的绑定方式，否则推荐使用.bind()的普通绑定<br>
									$(parent).delegate(target,type,fn)</span></li>
							<li><a href="#">undelegate()</a><span>undelegate() 无参数,删除所有委托事件<br>
									undelegate(ele,type) 删除指定的一个或多个事件,事件类型由空格分隔<br>
									undelegate(ele,type,fn) 删除指定的事件触发执行函数<br>
									undelegate(type) 删除所有type事件<br>
									undelegate(type.namespace) 删除指定命名空间事件</span></li>
						</ul>
						<h4>[<span>-</span>] 事件模拟</h4>
						<ul>
							<li><a href="#">trigger</a>(type,[datas])<span>模拟事件:让该事件在页面加载时便模拟执行一次,可连缀写法<br>
									$(ele).type(fn[data]).trigger(type) <br>
									简写方案:【限JQ封装的常用事件】想让某个事件执行模拟用户行为,直接再调用一个空的同名事件即可<br>
									$(ele).type(fn).type()
									单fn数据:可以传入数据，此处数据为事件函数传入的数据，而非e.data<br>
									$(ele).type(fn[e,data]).trigger(type,data)<br>
									多fn数据:可传入多个data数据,用[]将其包围<br>
									$(ele).type(fn[e,data1,data2]).trigger(type,[data1,data2])</span></li>
							<li><a href="#">triggerHandler</a>(type, [data])<span>与trigger的区别：<br>
									1.不会触发事件的默认行为，如表单提交<br>
									2.只会影响第一个匹配到的元素，而.trigger()会影响所有。<br>
									3.返回当前事件执行的返回值，如果没有返回值，则返回undefined；而.trigger()则返回当前包含事件触发元素的 jQuery
									对象(方便链式连缀调用)<br>
									4.对于自定义事件，.triggerHandler()不会冒泡，trigger()则默认会冒泡</span></li>
						</ul>
						<h4>[<span>-</span>] 命名空间/自定义事件</h4>
						<ul>
							<li><a href="#">on(itype,fn).trigger(itype)</a><span>除了通过 JavaScript
									事件名触发trigger，也可以通过自定义的事件触发。<br>
									所谓自定义事件其实就是一个被.bind()绑定的任意函数</span></li>
							<li><a href="#">e.namespace</a><span>
									对匿名函数的移除,以及批量移除相同命名空间的不同事件<br>
									适用于bind绑定事件与模拟事件,不能用于JQ封装的常用事件<br>
									$(ele).bind(type.name1,fn)<br>
									$(ele).trigger(type.name1)<br>
									e.namespace返回命名空间的名称</span></li>
						</ul>
						<h4>[<span>-</span>] 浏览器/文档事件</h4>
						<ul>
							<li><a
									href="#">ready(fn)</a><span>文档就绪,DOM结构完成时即执行,如果某些行为必须等待图片或css加载完成再执行则应绑定到load事件</span>
							</li>
							<li><a href="#">load</a>([[data],fn])<span>必须完全加载完成,而ready只判定DOM结构<br>当所有子元素已经被完全加载完成时，load事件被发送到这个元素。<br>此事件适用于任何可使用
									URL关联的任何元素：images, scripts, frames, iframes, window 对象。</span></li>
							<li><a href="#">unload</a>([[data],fn])<span>
									unload事件部分浏览器不支持,可用于放置清理内存.<br> 点击某个离开页面的链接<br>
									在地址栏中键入了新的 URL<br>
									使用前进或后退按钮<br>
									关闭浏览器<br> 重
									新加载页面 </span></li>
							<li><a href="#">scroll</a>([[data],fn])<span>
									scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）
									<br><b>调式IE的过程中，需要去掉console.log命令，否则会因为前面不识别而不运行，改为alert命令</b>
									<br>1.动态监听浏览器拖曳滚动条scroll事件应使用document绑定事件（而非html或body）
									<br>$(document).scroll(function(){
									<br> nowscroll = $(document).scrollTop();
									<br>})
									<br>2.绑定点击触发页面滚动事件，要设置'html'和'body'元素滚动，设置document无效
									<br>设置body在IE中无效,设置html在webkit某些时候无效,尽量不要用window,未知报错
									<br>$(selector).click(function(){
									<br> $('body,html').animate({'scrollTop':val},speed)
									<br>})
									<br><b>当为a元素带#时，默认会跳到顶部，需要阻止默认行为！</b></span></li>
							<li><a href="#">resize</a>([[data],fn])<span>浏览器window的尺寸发生改变时</span></li>
							<li><a
									href="#">error</a>([[data],fn])<span>可用于设置window错误时返回true而不报错<br>设置图片错误时隐藏图片<br>或将(window)错误传递给服务器端记录文件</span>
							</li>
						</ul>
						<h4>[<span>+</span>] 鼠标事件</h4>
						<ul style="display:none">
							<li><a href="#">click</a>([[data],fn])<span>click(fn) 绑定一个函数到点击<br> click(data,fn)
									绑定一个函数并传入eventData<br> click() 触发此事件,可能由其他事件触发此事件发生<br>
									*click要素：鼠标指针在元素里面时点击，鼠标指针在元素里面时释放，如果这些不被满足，mousedown 或 mouseup事件可能更加合适。 </span>
							</li>
							<li><a href="#">dblclick</a>([[data],fn])<span>双击</span></li>
							<li><a href="#">mousedown</a>([[data],fn])<span>鼠标按下</span></li>
							<li><a href="#">mouseup</a>([[data],fn])<span>鼠标弹起</span></li>
							<li><a href="#">mouseover</a>([[data],fn])<span>鼠标经过</span></li>
							<li><a href="#">mouseout</a>([[data],fn])<span>鼠标移出</span></li>
							<li><a href="#">mousemove</a>([[data],fn])<span>鼠标移动</span></li>
							<li><a href="#">mouseenter</a>([[data],fn])<span>鼠标穿入,穿过子元素而非本体内容时不触发</span></li>
							<li><a href="#">mouseleave</a>([[data],fn])<span>鼠标穿出,穿过子元素而非本体内容时不触发</span></li>
							<li><a href="#">hover</a>(enter,leave)<span>组合mouseenter与mouseleave</span></li>
						</ul>
						<h4>[<span>-</span>] 键盘事件</h4>
						<ul>
							<li><a href="#">keydown</a>([[data],fn])<span>键盘按下,返回键码e.keyCode</span></li>
							<li><a href="#">keypress</a>([[data],fn])<span>键盘按下,返回字符编码e.charCode </span></li>
							<li><a href="#">keyup(</a>([[data],fn])<span>键盘按下并弹起</span></li>
							<li><a href="#">e.which</a><span>鼠标事件监听绑定[click]等<br>
									原生鼠标事件event.button [右键事件oncontextmenu] 左0中1右2<br><br>
									键盘事件监听绑定[keyup]等,且必须绑定在可键入元素中,如input等<br>
									原生键盘事件keyCode[keydown]与charCode[keypress] (charCode区分大小写或上标)<br><br>
									JQ中组合他们：<br>
									鼠标为左1中2右3,键码为keyCode<br> </span></li>
							<li><a href="#">e.altKey/ctrlKey/shiftKey</a><span>JS原生和JQ都可以使用的对象event.xKey / e.xKey <br>
									同样需要绑定鼠标或者键盘事件(均可) <br>
									需要在鼠标或键盘事件触发时同时按下(单独按下无效) <br>
									返回true/false</span></li>
						</ul>
						<h4>[<span>-</span>] 表单事件</h4>
						<ul>
							<li><a href="#">focus</a>([[data],fn])<span>获取焦点,必须为当前元素</span></li>
							<li><a href="#">blur</a>([[data],fn])<span>丢失焦点,必须为当前元素 </span></li>
							<li><a href="#">focusin</a>([[data],fn])<span>获取焦点,可以为当前元素的子元素</span></li>
							<li><a href="#">focusout</a>([[data],fn])<span>获取焦点,可以为当前元素的子元素</span></li>
							<li><a href="#">change</a>([[data],fn])<span>下拉选择,单选多选,文本框/域值发生变化时<br>
									仅限用于input、textarea、select元素。<br> 对于下拉选择框，复选框和单选按钮，当用户用鼠标作出选择，该事件立即触发<br>
									但对于其他类型的input元素，该事件触发将推迟，直到元素失去焦点才会触点</span></li>
							<li><a href="#">select</a>([[data],fn])<span>文本被选择事件!而非下拉列表选择</span></li>
							<li><a href="#">submit</a>([[data],fn])<span>注意绑定的对象是form!而非submit </span></li>
						</ul>
					</div>
				</li>
				<li>
					<h3>事件对象<span>-</span></h3>
					<div>
						<h4>[<span>-</span>] 事件对象属性</h4>
						<ul>
							<li><a href="#">e.data</a><span>传入指定值绑定到事件函数里,可以为变量,如为函数会打印函数字符串,需要()执行函数返回函数返回的内容</span>
							</li>
							<li><a href="#">e.result</a><span>返回同一个元素上一个事件绑定函数的返回值</span></li>
							<li><a href="#">e.timeStamp</a><span>返回事件触发时的时间戳</span></li>
							<li><a href="#">e.type</a><span>事件类型</span></li>
							<li><a href="#">e.target</a><span>触发事件的DOM元素</span></li>
							<li><a href="#">e.currentTarget</a><span>事件监听的元素,即被绑定事件的元素</span></li>
							<li><a href="#">e.relatedTarget</a><span>对于 mouseout 事件，它指向被进入的元素；<br> 对于 mousein
									事件，它指向被离开的元素。</span></li>
							<li><a href="#">e.delegateTarget</a><span>事件委托目标</span></li>
						</ul>
						<h4>[<span>-</span>] 冒泡与默认行为</h4>
						<ul>
							<li><a href="#">action(return false)</a><span>给JQ对象绑定事件的返回值设为false，则既阻止默认行为也会阻止冒泡</span>
							</li>
							<li><a href="#">e.stopPropagation()</a><span>阻止冒泡</span></li>
							<li><a href="#">e.preventDefault()</a><span>阻止默认行为 <br>
									*阻止表单提交应对按钮绑定事件click,或表单绑定submit</span></li>
							<li><a
									href="#">e.stopImmediatePropagation()</a><span>取消事件冒泡，并取消该事件的后续事件处理函数【并未取消默认行为】</span>
							</li>
							<li><a href="#">e.isDefaultPrevented()</a><span></span></li>
							<li><a href="#">e.isPropagationStopped()</a><span></span></li>
							<li><a href="#">e.isImmediatePropagation()</a><span></span></li>
						</ul>
					</div>
				</li>
			</ul>
			<ul>
				<li>
					<h3>ajax<span>-</span></h3>
					<div>
						<h4>[<span>-</span>] 底层接口</h4>
						<ul>
							<li><a href="#">$.ajax</a>({setting})
								<span>
									$.ajax({ <br>
									url:'url.php', <br>
									type:'POST', //默认为'GET' <br>
									data:{name:'value',name:'value'}, <br>
									success:function(response,status,xhr){//something} <br>
									}) <br>
									<a href="https://jquery.bootcss.com/jQuery.ajax/" title="">more info »</a>

								</span></li>
							<li><a href="#">$.ajaxSetup</a>({setting})
								<span>同$.ajax(),初始化设置重复应用的一些属性和方法<br>
									<a href="https://jquery.bootcss.com/jQuery.ajaxSetup/" title="">more info »</a>
								</span>
							</li>
							<li><a href="#">$.ajaxPrefilter</a>([datatype],fn)
								<span>jQuery.ajaxPrefilter( [dataTypes], handler(options, originalOptions, jqXHR) )<br>
									在每个请求之前被发送和$.ajax()处理它们前处理，设置自定义Ajax选项或修改现有选项。<br>
									options 是请求的选项<br>
									originalOptions 值作为提供给Ajax方法未经修改的选项，因此，没有ajaxSettings设置中的默认值<br>
									jqXHR 是请求的jqXHR对象<br>
									<a href="https://jquery.bootcss.com/jQuery.ajaxPrefilter/" title="">more info »</a>
								</span>
							</li>
							<li><a href="#">$.ajaxTransport</a>([datatype],fn)
								<span>处理自定义数据类型<br>
									传输（transport）是一个对象，它提供了两种方法，send 和
									abort，内部使用由$.ajax()发出请求。传输（transport）是最高级的方法用来增强$.ajax()并且应仅作为当预过滤器（prefilters）和转换器（converters）无法满足你的需求的时候的最后的手段。<br>
									由于每个请求需要有自己的传输（transport）对象实例，传输不能直接注册。因此，你应该提供一个函数代替返回传输（transport）。<br>
									<a href="https://jquery.bootcss.com/jQuery.ajaxTransport/" title="">more info »</a>
								</span>
							</li>
						</ul>
						<h4>[<span>-</span>] 表单序列化</h4>
						<ul>
							<li><a href="#">serialize()</a>
								<span>$('form').serialize() 获取到 name=value&amp;name=value 格式<br>
									当对整体表单进行序列化时,注意被序列对象为form,会自动编码. <br>
									注意: 只有 "successful controls"可以被序列化成字符串。其中，提交按钮的值不会被序列化。<br>
									另外，如果想要一个表单元素的值被序列化成字符串，这个元素必须含有 name属性。<br>此外，复选框（checkbox）和单选按钮（radio）(input 类型为
									"radio" 或 "checkbox")的值只有在被选中时才会被序列化。<br>另外，文件选择元素的数据也不会被序列化。<br>
									<a href="https://jquery.bootcss.com/serialize/">more info »</a>
								</span>
							</li>
							<li><a href="#">$.param</a>({obj})
								<span>将复杂的对象键值对转为name=value格式. <br>
									因为一些框架解析序列化的数字的能力有限， 在传递 obj 参数时我们应该谨慎，尽量不要传递含有对象的数组，或者数组中嵌套其它数组。<br>
									<a href="https://jquery.bootcss.com/jQuery.param/">more info »</a>
								</span>
							</li>
						</ul>
						<h4>[<span>-</span>] 快捷方法</h4>
						<ul>
							<li><a href="#">load</a>(url [.sel],[data],fn)
								<span>
									url .selector对载入的HTML进行筛选，那么只要在 url 参数后面跟着一个选择器即可<br>
									$(box).load('https://domain.com/test.html .some') <strong>//注意加.号</strong><br>
									一般用于静态文件加载
								</span>
							</li>
							<li><a href="#">$.get</a>(url,[data],fn,type)
								<span>
									传参方式: <br>
									$.get('url?name=value') <br>
									$.get('url','name=value&amp;name=value') <br>
									$.get('url',{name:'value',name:'value'}) <br>
									type指定异步返回的类型: xml/html/script/json/jsonp/text<br>
									一般情况下 type参数是智能判断,并不需要我们主动设置,如果主动设置,则会强行按照指定类型格式返回.<br>
									XML: $(response).find('xmltag1').find('xmltag2').text() <br>
									<br>
								</span>
							</li>
							<li><a href="#">$.post</a>(url,[data],fn,type)
								<span>
									传参方式：<br>
									$.get('url','name=value&amp;name=value') <br>
									$.get('url',{name:'value',name:'value'}) <br>
								</span>
							</li>
							<li><a href="#">fn</a>(response,status,xhr)
								<span>
									回调参数：<br>
									response（请求返回的原文本）<br>
									status（请求状态):成功 success | 失败 error<br>
									xhr（XMLHttpRequest对象）【属性见XHR条目】<br>
								</span>

							</li>
							<li><a href="#">$.getScript</a>(url,fn)
								<span>
									一般只需第一个参数,用于过多JS动画等分次按需加载
								</span></li>
							<li><a href="#">$.globalEval(code)</a><span>
									此方法的表现不同于正常使用的JavaScript eval()，因为它是在全局上下文下执行（这对加载外部动态脚本很重要）。
									<br><a href="https://jquery.bootcss.com/jQuery.globalEval/">more info »</a>
								</span></li>
							<h4>[<span>-</span>] JSON/JSONP</h4>
							<ul>
								<li><a href="#">Response Examples</a>(PHP)
									<span>
										<b>GET：test.php?name=value</b><br>
										<pre><code data-language="php" class="rainbow">
          <span class="keyword operator">&lt;</span><span class="keyword operator">!</span><span class="keyword operator">-</span><span class="keyword operator">-</span>?php
            <span class="keyword">if</span> (<span class="variable dollar-sign">$</span><span class="variable">_GET</span>[<span class="string">'name'</span>] <span class="keyword operator">=</span><span class="keyword operator">=</span> <span class="string">'value'</span>) {
            <span class="support">echo</span> <span class="string">'some'</span>;
            } <span class="keyword">else</span> {
            <span class="support">echo</span> <span class="string">'other'</span>;
            }
          ?<span class="keyword operator">-</span><span class="keyword operator">-</span><span class="keyword operator">&gt;</span>  
         </code></pre>
										<b>POST：{name:'value'}</b><br>
										<pre><code data-language="php" class="rainbow">
           <span class="keyword operator">&lt;</span><span class="keyword operator">!</span><span class="keyword operator">-</span><span class="keyword operator">-</span>?php
             <span class="keyword">if</span> (<span class="variable dollar-sign">$</span><span class="variable">_POST</span>[<span class="string">'name'</span>] <span class="keyword operator">=</span><span class="keyword operator">=</span> <span class="string">'value'</span>) {
             <span class="support">echo</span> <span class="string">'some'</span>;
             } <span class="keyword">else</span> {
             <span class="support">echo</span> <span class="string">'other'</span>;
             }
           ?<span class="keyword operator">-</span><span class="keyword operator">-</span><span class="keyword operator">&gt;</span>  
         </code></pre>
										<b>JSONP：https://domain.com/test.php?callback=? </b><br>
										<b>dataType : 'jsonp'</b><br>
										<pre><code data-language="php" class="rainbow">
            <span class="comment">//跨域的 PHP 端文件</span>
            <span class="keyword operator">&lt;</span><span class="keyword operator">!</span><span class="keyword operator">-</span><span class="keyword operator">-</span>?php
              <span class="variable dollar-sign">$</span><span class="variable">arr</span> <span class="keyword operator">=</span> <span class="support function">array</span>(<span class="string">'a'</span><span class="keyword operator">=</span><span class="keyword operator">-</span><span class="keyword operator">-</span><span class="keyword operator">&gt;</span><span class="constant numeric">1</span>,'b'<span class="keyword operator">=</span><span class="keyword operator">&gt;</span><span class="constant numeric">2</span>,'c'<span class="keyword operator">=</span><span class="keyword operator">&gt;</span><span class="constant numeric">3</span>,'d'<span class="keyword operator">=</span><span class="keyword operator">&gt;</span><span class="constant numeric">4</span>,'e'<span class="keyword operator">=</span><span class="keyword operator">&gt;</span><span class="constant numeric">5</span>);
              <span class="variable dollar-sign">$</span><span class="variable">result</span> <span class="keyword operator">=</span> <span class="function call">json_encode</span>(<span class="variable dollar-sign">$</span><span class="variable">arr</span>);
              <span class="variable dollar-sign">$</span><span class="variable">callback</span> <span class="keyword operator">=</span> <span class="variable dollar-sign">$</span><span class="variable">_GET</span>[<span class="string">'callback'</span>];
              <span class="support">echo</span> <span class="variable dollar-sign">$</span><span class="variable">callback</span><span class="keyword dot">.</span><span class="string">"($result)"</span>;
            <span class="variable language php-tag">?&gt;</span>  
         </code></pre>
									</span></li>
								<li><a href="#">JSON/JSONP</a>
									<span>对于PHP文件输出的JSON格式数据,需要强制设置dataType为json类型<br>
										<pre><code data-language="javascript" class="rainbow">
            <span class="comment">//$.ajax()方法跨域获取 JSON</span>
           <span class="selector"> $</span>.<span class="function call">ajax</span>({
             url : <span class="string">'https://www.li.cc/test.php?callback=?'</span>,
             dataType : <span class="string">'jsonp'</span>,
             success : <span class="storage function">function</span> (response, status, xhr) {
              console.<span class="support method">log</span>(response);
              <span class="function call">alert</span>(response.a);
             }
            });  
         </code></pre>
									</span></li>
							</ul>
							<li><a href="#">$.parseJSON</a>(json)<span>接受一个JSON字符串，返回解析后的对象。</span></li>
							<li><a href="#">serializeArray()</a>
								<span>表单序列化：创建一个对象组成的javascript数组，用来编码成一个JSON一样的字符串。<br>
									[
									{
									name: "a",
									value: "1"
									},
									{
									name: "b",
									value: "2"
									}
									] <br>
									<a href="https://jquery.bootcss.com/serializeArray/">more info »</a>
								</span>
							</li>
							<li><a href="#">$.getJSON</a>(url,[data],fn)
								<span>快捷方法获取JSON文件：<br>
									JSON:$(response)[index].prop
								</span></li>
						</ul>
						<h4>[<span>-</span>] ajax事件</h4>
						<ul>
							<li><a href="#">ajaxSend</a>(fn)<span>请求发送前执行函数</span></li>
							<li><a href="#">ajaxStart</a>(fn)
								<span>绑定在document上.ajax请求提交<br>
									例：$('document').ajaxStart(funtion(){<br>
									$('隐藏提示盒').show();<br>
									}).ajaxStop(function(){<br>
									$('隐藏提示盒').hide();<br>
									})<br>
								</span></li>
							<li><a href="#">ajaxSuccess</a>(fn)<span>请求成功时执行函数,局部方法.success()和.done()</span></li>
							<li><a href="#">ajaxComplete</a>(fn)<span>请求完成时执行函数,不管是否成功,局部方法.complete()和.always()</span>
							</li>
							<li><a href="#">ajaxError</a>(fn)<span>请请求发生错误时执行函数,局部方法.error()和.fail()</span></li>
							<li><a href="#">ajaxStop</a>(fn)
								<span>ajax请求结束</span></li>
						</ul>
						<h4>[<span>-</span>] 错误处理</h4>
						<ul>
							<li><a href="#">$.ajax({error:fn})</a>
								<span>调用ajax全局方法之局部对象属性:<br>
									error : function (xhr,errorText,errorType){}
								</span></li>
							<li><a href="#">$.post().error(fn)</a>
								<span>ajax快捷方法.error()连缀提示<br>
									$.post().error(function(){xhr,status,info})
								</span></li>
							<li><a href="#">$(doc).$.ajaxError(fn)</a>
								<span>全局.ajaxError()事件<br>
									$(document).ajaxError(function (event, xhr, settings, infoError) {}
								</span></li>
							<li><a href="#">XHR/jqXHR/$.when()</a>
								<span>
									使用 jqXHR 的连缀方式比$.ajax()的属性方式有三大好处：<br>
									1.可连缀操作，可读性大大提高；<br>
									2.可以多次执行同一个回调函数；<br>
									jqXHR.done().done(); //同时执行多个成功后的回调函数<br>
									3.为多个操作指定回调函数；<br>
									//多个操作指定回调函数<br>
									var jqXHR = $.ajax('test.php');<br>
									var jqXHR2 = $.ajax('test2.php');<br>
									$.when(jqXHR, jqXHR2).done(function (r1,r2) { //传入参数<br>
									alert(r1[0]); //需要指定[0]获取jqXHR对象数据,而不是jqXHR<br>
									alert(r2[0]);<br>
									});
									<hr>
									XMLHttpRequest属性<br>
									<table width="100%" border="1" cellspacing="0" cellpadding="2">
										<tbody>
											<tr>
												<td valign="top">xhr.responseText</td>
												<td valign="top">作为响应主体被返回的文本</td>
											</tr>
											<tr>
												<td valign="top">xhr.responseXML</td>
												<td valign="top">如果响应主体内容类型是"text/xml"或"application/xml" ，则返回包含响应数据的 XML
													DOM 文档</td>
											</tr>
											<tr>
												<td valign="top">xhr.status</td>
												<td valign="top">响应的 HTTP 状态，成功为200</td>
											</tr>
											<tr>
												<td valign="top">xhr.statusText</td>
												<td valign="top">HTTP 状态的说明(成功为ok)
													<div>
														<ul>
															<li>200 OK 服务器成功返回了页面</li>
															<li>400 Bad Request 语法错误导致服务器不识别</li>
															<li>401 Unauthorized 请求需要用户认证</li>
															<li>404 Not found 指定的 URL 在服务器上找不到</li>
															<li>500 Internal Server Error 服务器遇到意外错误，无法完成请求</li>
															<li>503 ServiceUnavailable 由于服务器过载或维护导致无法完成请求</li>
														</ul>
													</div>
												</td>
											</tr>
											<tr>
												<td valign="top">xhr.readyState</td>
												<td valign="top">请求/相应过程的当前活动阶段
													<div>
														<ul>
															<li>0 未初始化 尚未调用 open()方法</li>
															<li>1 启动 已经调用 open()方法，但尚未调用 send()方法</li>
															<li>2 发送 已经调用 send()方法，但尚未接受响应</li>
															<li>3 接受 已经接受到部分响应数据</li>
															<li>4 完成 已经接受到全部响应数据，而且可以使用</li>
														</ul>
													</div>
												</td>
											</tr>
										</tbody>
									</table>
								</span>
							</li>

						</ul>
					</div>
				</li>
			</ul>
			<ul>
				<li>
					<h3>延迟对象<span>+</span></h3>
					<div style="display:none">
						<ul>
							<li><a href="#">def.done</a>(d,[d])<span></span></li>
							<li><a href="#">def.fail</a>(failCallbacks)<span></span></li>
							<li><a href="#">def.reject</a>(args)<span></span></li>
							<li><a href="#">def.rejectWith</a>(c,[a])<span></span></li>
							<li><a href="#">def.resolve</a>(args)<span></span></li>
							<li><a href="#">def.resolveWith</a>(c,[a])<span></span></li>
							<li><a href="#">def.promise</a>([ty],[ta])<span></span></li>
							<li><a href="#">def.always</a>(al,[al])<span></span></li>
							<li><a href="#">def.notify</a>(args)<span></span></li>
							<li><a href="#">def.notifyWith</a>(c,[a])<span></span></li>
							<li><a href="#">def.progress</a>(proCal) <span></span></li>
							<li><a href="#">def.state()</a><span></span></li>
						</ul>
					</div>
				</li>
				<li>
					<h3>回调函数<span>+</span></h3>
					<div style="display:none">
						<ul>
							<li><a href="#">cal.add</a>(callbacks)<span></span></li>
							<li><a href="#">cal.disable()</a><span></span></li>
							<li><a href="#">cal.empty()</a><span></span></li>
							<li><a href="#">cal.fire</a>(arguments)<span></span></li>
							<li><a href="#">cal.fired()</a><span></span></li>
							<li><a href="#">cal.fireWith</a>([c] [,a])<span></span></li>
							<li><a href="#">cal.has</a>(callback)<span></span></li>
							<li><a href="#">cal.lock()</a><span></span></li>
							<li><a href="#">cal.locked()</a><span></span></li>
							<li><a href="#">cal.remove</a>(callbacks)<span></span></li>
							<li><a href="#">$.callbacks</a>(flags)<span></span></li>
						</ul>
					</div>
				</li>
				<li>
					<h3>参考资料<span>-</span></h3>
					<div>
						<h4>[<span>-</span>] 扩展</h4>
						<ul>
							<li><a href="https://plugins.jquery.com/?s=">官方插件库</a></li>
							<li><a href="https://www.jq22.com/">中文插件库</a></li>
							<li><a href="https://www.jeasyui.com/index.php">Esay UI</a></li>
							<li><a href="https://jqueryui.com/download/">jQuery UI</a></li>
						</ul>
						<h4>[<span>-</span>] 资料</h4>
						<ul>
							<li><a href="https://jquery.bootcss.com/">中文API文档</a></li>
							<li><a href="https://hemin.cn/jq/">JQ中文手册</a></li>
							<li><a href="https://pan.baidu.com/s/1i35lmlf">jQuery源码分析</a><span>
									jQuery技术内幕：深入解析jQuery架构设计与实现原理</span></li>
							<li><a href="https://study.163.com/course/courseMain.htm?courseId=501006">李炎恢jQuery视频教程</a>
							</li>
						</ul>
						<h4>[<span>-</span>] 浏览器API</h4>
						<ul>
							<li><a href="https://msdn.microsoft.com/zh-cn/ie">IE API</a><span></span></li>
							<li><a href="https://developer.mozilla.org/zh-CN/">FireFox API</a><span></span></li>
						</ul>

					</div>
				</li>
				<li>
					<h3>提醒<span>-</span></h3>
					<div>
						<h4>[<span>-</span>] 粗心大魔王</h4>
						<ul>
							<li><a href="#">JQ需要先执行ready函数内</a></li>
							<li><a href="#">坐标位置与宽度加px</a></li>
							<li><a href="#">字符串与属性值要引号</a></li>
							<li><a href="#">属性与CSS的回调可用index</a></li>
							<li><a href="#">动画中可用options</a></li>
							<li><a href="#">使用slow等内置参数时加引号</a></li>
							<li><a href="#">事件中可用e和data</a></li>
							<li><a href="#">a弹出应用注意先阻止默认行为或+冒泡</a></li>
						</ul>
					</div>
				</li>
			</ul>
		</div>

		<div id="javascript" class="content" style="display:none">
			<ul>
				<li>
					<h3>语法<span>-</span></h3>
					<div>
						<h4>[<span>-</span>]基础</h4>
						<ul>
							<li><a href="#">全局变量</a><span>
									x1 = 1;<br>
									var x2 = 2;<br>
									window.x3 = 3;<br>
									<a href="https://snandy.iteye.com/blog/720816">3种全局变量的异同</a>
								</span></li>
							<li><a href="#"></a><span></span></li>
							<li><a href="#"></a><span></span></li>
						</ul>
						<h4>[<span>-</span>]其他</h4>
						<ul>
							<li><a href="#">Global Functions</a><span>
									<div>
										<div>全局函数
											<table>
												<tbody>
													<tr>
														<th align="left" width="32%">函数</th>
														<th align="left" width="68%">描述</th>
													</tr>
													<tr>
														<td>decodeURI()</td>
														<td>解码某个编码的 URI。</td>
													</tr>
													<tr>
														<td>decodeURIComponent()</td>
														<td>解码一个编码的 URI 组件。</td>
													</tr>
													<tr>
														<td>encodeURI()</td>
														<td>把字符串编码为 URI。</td>
													</tr>
													<tr>
														<td>encodeURIComponent()</td>
														<td>把字符串编码为 URI 组件。</td>
													</tr>
													<tr>
														<td>escape()</td>
														<td>对字符串进行编码。</td>
													</tr>
													<tr>
														<td>unescape()</td>
														<td>对由 escape() 编码的字符串进行解码。</td>
													</tr>
													<tr>
														<td>isFinite()</td>
														<td>检查某个值是否为有穷大的数。</td>
													</tr>
													<tr>
														<td>isNaN()</td>
														<td>检查某个值是否是数字。</td>
													</tr>
													<tr>
														<td>Number()</td>
														<td>把对象的值转换为数字。</td>
													</tr>
													<tr>
														<td>parseFloat()</td>
														<td>解析一个字符串并返回一个浮点数。</td>
													</tr>
													<tr>
														<td>parseInt()</td>
														<td>解析一个字符串并返回一个整数。</td>
													</tr>
													<tr>
														<td>String()</td>
														<td>把对象的值转换为字符串。
															.toString / valueOf除undefined,null</td>
													</tr>
													<tr>
														<td>eval()</td>
														<td>计算 JavaScript&nbsp;字符串，并把它作为脚本代码来执行。</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</span></li>
							<li><a href="#">javascript:void(0)</a></li>
							<li><a href="#">补充说明</a>
								<span>文件载入
									<br>1.尽量使用外置文件，且放置在末尾
									<br>2.defer延迟执行，async异步加载不影响其他加载【但不要含文档修改】
									<br>3.页内时引入闭合标签需要转义，页内时以防低版本的解析问题，用cdata片段包含
									<input value="&lt;![CDATA[ --- ]]&gt;">
									<br>4. noscript 脚本禁用时的替代提醒 /noscript
									<br>
									<br>语法细节
									<br>1.在函数内部定义的变量退出函数无效，在函数内部不用var声明的变量，则为全局变量
									<br>2.同时一次性定义多个变量，用逗号分隔，不需要再写var
									<br> var i=0;var j=1; ==&gt; var i=0,j=0
								</span></li>
						</ul>
					</div>
				</li>
				<li>
					<h3>数据类型<span>-</span></h3>
					<div>
						<h4>[<span>-</span>]类型检测</h4>
						<ul>
							<li><a href="#">Javscript data types</a><span>
									JS数据类型:
									<br>Undefined Null Boolean Number String Object
									<br>其中Array,function都属于Object
									<br>一切皆为对象，new Object / new Boolean() / new Number() / new String() / new
									<br>Array() / new Function() / new 构造函数名()</span></li>
							<li><a href="#">typeof</a> value
								<span>typeof数据类型测试返回值（返回的是字符串
									<table border="1" cellspacing="0" cellpadding="2">
										<tbody>
											<tr>
												<td valign="top">undefined</td>
												<td valign="top">未定义</td>
											</tr>
											<tr>
												<td valign="top">boolean</td>
												<td valign="top">布尔值</td>
											</tr>
											<tr>
												<td valign="top">string</td>
												<td valign="top">字符串/JSON</td>
											</tr>
											<tr>
												<td valign="top">number</td>
												<td valign="top">数值</td>
											</tr>
											<tr>
												<td valign="top">object</td>
												<td valign="top">对象/null</td>
											</tr>
											<tr>
												<td valign="top">function</td>
												<td valign="top">function</td>
											</tr>
										</tbody>
									</table>
									<ol>
										<li>
											不存在的变量与未声明的变量typeof检测均为undefined，但两者其实不同，故建议总是初始化。</li>
										<li>
											Null 类型是一个只有一个值的数据类型，即特殊的值 null。它表示一个空对象引用(指针)，而 typeof 操作符检测 null 会返回
											object。如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为 null。这样， 当检查 null
											值就知道是否已经变量是否已经分配了对象引用了。</li>
										<li>
											undefined 是派生自 null 的，因此 ECMA-262 规定对它们的相等性测试返回 true。alert(undefined ==
											null);但typeof数据类型不等。</li>
									</ol>
								</span></li>
							<li>value <a href="#">instanceof</a> types
								<span>instanceof引用类型数据测试
									<table width="100%" border="1" cellspacing="0" cellpadding="2">
										<tbody>
											<tr>
												<td valign="top">value instanceof Array</td>
												<td valign="top">数组</td>
											</tr>
											<tr>
												<td valign="top">value instanceof Obj</td>
												<td valign="top">构造函数实例</td>
											</tr>
											<tr>
												<td valign="top">
													<div>value instanceof&nbsp;Date</div>
												</td>
												<td valign="top">日期时间</td>
											</tr>
											<tr>
												<td valign="top">value instanceof&nbsp;RegExp</td>
												<td valign="top">正则表达式</td>
											</tr>
											<tr>
												<td valign="top">
													<div>value instanceof&nbsp;Math</div>
												</td>
												<td valign="top">数学</td>
											</tr>
										</tbody>
									</table></span></li>
							<li><a href="#">isNaN</a>(value)<span>是否为非数值,转换后非数值为true，数值false
									<br>1. 非数值执行运算，会隐藏自动转型（除+）
									<br>2. 加法操作中，数值字符串与数值运算，则改变为字符串串联，减法中，会继续自动转换数值进行运算</span></li>
							<li><a href="#">isFinite</a>(value)<span>判断是否为无穷值超出计算范围</span></li>
							<li><a href="#">Array.isArray</a>(value)<span>检测是否为数组（EC5）</span></li>
						</ul>
						<h4>[<span>-</span>]类型转换</h4>
						<ul>
							<li><a href="#">Boolean</a>(value)
								<span>Boolean(value)布尔转换规则&nbsp;（控制流会自动转换）
									<table border="1" cellspacing="0" cellpadding="2">
										<tbody>
											<tr>
												<td valign="top">Boolean(value)</td>
												<td valign="top">true</td>
												<td valign="top">false</td>
											</tr>
											<tr>
												<td valign="top">undefined</td>
												<td valign="top"></td>
												<td valign="top">undefined</td>
											</tr>
											<tr>
												<td valign="top">boolean</td>
												<td valign="top">true</td>
												<td valign="top">false</td>
											</tr>
											<tr>
												<td valign="top">string</td>
												<td valign="top">非空</td>
												<td valign="top">空</td>
											</tr>
											<tr>
												<td valign="top">number</td>
												<td valign="top">非零数值</td>
												<td valign="top">0与NaN</td>
											</tr>
											<tr>
												<td valign="top">object</td>
												<td valign="top">对象（包括空的对象）</td>
												<td valign="top">null（空对象）</td>
											</tr>
										</tbody>
									</table>
								</span></li>
							<li><a href="#">Number</a>(value)<span>
									用于任何数据类型
									<br>number=number
									<br>boolean=1 / 0
									<br>undefined=NaN
									<br>null=0
									<br>空字符串=0
									<br>非数值(string+/object)=NaN</span></li>
							<li><a href="#">parseInt</a>(str)<span>
									用于字符串，自动判定进制
									<br>忽略空格，空字符串=NaN
									<br>第一个非空字符不是数值或负号=NaN
									<br>第一个非空字符是数值，遇到非数值时停止解析=number</span></li>
							<li><a href="#">parseFloat</a>(str)<span>
									用于字符串
									<br>第一个小数点有效，第二个无效</span></li>
							<li>all.<a
									href="#">toString</a>([16])<span>所有类型（除Null,undefined）,数值转成字符串的时候，可以传递进制参数，默认10进制</span>
							</li>
							<li><a href="#">String</a>(value)
								<span>不确定null和undefined时,返回null和undefined</span></li>
							<li>str.<a href="#">split</a>(符号,num)
								<span>字符串=&gt;数组，符号+次数，多次分割，子项分割</span></li>
							<li>arr.<a href="#">join</a>(符号)
								<span>数组=&gt;字符串，把数组的所有元素放入一个字符串，元素通过指定的分隔符进行串联。</span></li>
							<li><a href="#">JSON.parse</a>(json)<span>JSON=&gt;JS对象</span></li>
							<li><a href="#">JSON.stringify</a>(obj)<span>JS对象=&gt;JSON</span></li>
						</ul>
					</div>
				</li>
				<li>
					<h3>运算与语句<span>-</span></h3>
					<div>
						<h4>[<span>+</span>]运算</h4>
						<ul style="display:none;">
							<li><a href="#">一元运算符</a><span>
									<h2>一元运算符</h2>
									<div>
										<table width="100%" border="1" cellspacing="0" cellpadding="2">
											<tbody>
												<tr>
													<td valign="top">i++后置递增，++i前置递增，i--后置递减，--i前置递减，+i取正，-i取负</td>
												</tr>
											</tbody>
										</table>
										<div></div>
									</div>
									<ul>
										<li>只能操作一个值的运算符叫做一元运算符</li>
										<li>递增++和递减--、取正+、取负-</li>
										<li>递增递减中前置和后置的区别</li>
									</ul>
									<div>
										<blockquote>
											<div>在没有赋值操作， 前置和后置是一样的。 但在赋值操作时， 如果递增或递减运算符前置 ，
												那么前置的运算符会先累加或累减再赋值，如果是后置运算符则先赋值再累加或累减。</div>
											<div>var box = 100;
												var age = ++box; //age 值为 101
												var height = box++; //height 值为 100</div>
										</blockquote>
									</div>
									<div>
										<ul>
											<li>非数值执行运算，会隐藏自动转型为数值（除+）</li>
										</ul>
										其他类型应用一元运算符的规则
									</div>
									<blockquote>
										<div>var box = '89'; box++; //90，数值字符串自动转换成数值</div>
										<div>var box = 'ab'; box++; //NaN，字符串包含非数值转成 NaN</div>
										<div>var box = false; box++; //1，false 转成数值是 0，累加就是 1</div>
										<div>var box = 2.3; box++; //3.3，直接加 1</div>
										<div>var box = { //1，不设置 toString 或 valueOf 即为 NaN</div>
										<div>toString : function() {</div>
										<div>return 1;</div>
										<div>}</div>
										<div>}; box++;</div>
									</blockquote>
								</span></li>
							<li><a href="#">算数运算符</a><span>
									<div><b><span style="font-size: small;">算术运算符</span></b></div>
									<div>
										<table width="100%" border="1" cellspacing="0" cellpadding="2">
											<tbody>
												<tr>
													<td valign="top"><span
															style="font-size: small;">+加法，-减法，*乘法，/除法，%求模</span></td>
												</tr>
											</tbody>
										</table>
										<div></div>
									</div>
									<ul>
										<li><span
												style="color: #e30000; font-size: small;"><b>加法操作中，数值字符串与数值运算，则改变为字符串串联，减法中，会继续自动转换数值进行运算</b></span>
										</li>
										<li><span style="font-size: small;">加法操作中，非数值字符串与数值运算，会串联字符串，减法中，则会得到NaN</span>
										</li>
										<li><span
												style="font-size: small;">加法操作中，数值+object类型=字符串（Num[object]），减法中，则会得到NaN</span>
										</li>
										<li><span style="font-size: small;">乘法操作中，数值*非数值字符串或对象返回NaN，除法与求模同NaN</span>
										</li>
									</ul>
									<div></div>
								</span></li>
							<li><a href="#">关系运算符</a><span>
									<div><b><span style="font-size: small;">关系运算符&nbsp;<span
													style="color: #e30000;">（返回一个布尔值）</span></span></b></div>
									<div>
										<table width="100%" border="1" cellspacing="0" cellpadding="2">
											<tbody>
												<tr>
													<td valign="top"><span
															style="font-size: small;">&gt;大于，&lt;小于，&gt;=大于等于，&lt;=小于等于，==相等，!=不等，===全等，!==不全等</span>
													</td>
												</tr>
											</tbody>
										</table>
										<div></div>
									</div>
									<div>
										<ul>
											<li><span style="font-size: small;">两个操作数都是数值，则数值比较；</span></li>
											<li><span
													style="color: #0000ff; font-size: small;">两个操作数都是字符串，则比较两个字符串对应的字符编码值；</span>
											</li>
											<li><span style="font-size: small;">两个操作数有一个是数值，则将另一个转换为数值，再进行数值比较；</span>
											</li>
											<li><span style="font-size: small;">两个操作数有一个是对象，则先调用 valueOf()方法或
													toString()方法，再用结果比较；</span></li>
											<li><span style="font-size: small;">不需要任何转换的情况下，null 和 undefined
													是相等的；</span></li>
											<li><span style="font-size: small;">一个操作数是 NaN，则==返回 false，!=返回 true；并且 NaN
													和自身不等；</span></li>
											<li><span style="font-size: small;">两个操作数都是对象，则比较他们是否是同一个对象，如果都指向同一个对象，则返回
													true，否则返回 false。</span></li>
										</ul>
									</div>
									<blockquote>
										<div><span style="font-size: small;">var box = {} == {};
												//false，比较的是他们的地址，每个新创建对象的</span></div>
										<div><span style="font-size: small;">引用地址都不同</span></div>
										<div><span style="font-size: small;">var age = {};</span></div>
										<div><span style="font-size: small;">var height = age;</span></div>
										<div><span style="font-size: small;">var box = age ==
												height;&nbsp;</span><a><span
													style="font-size: small;">//true，引用地址一样，所以相等</span></a></div>
										<div><span style="font-size: small;">&nbsp;</span></div>
									</blockquote>
								</span></li>
							<li><a href="#">逻辑运算符</a><span>
									<div><span style="font-size: small;"><b>逻辑运算符</b><span
												style="color: #0000ff;">（通常用于布尔值的操作）</span></span></div>
									<div>
										<table width="100%" border="1" cellspacing="0" cellpadding="2">
											<tbody>
												<tr>
													<td valign="top"><span
															style="font-size: small;">&amp;&amp;逻辑与(AND)、||逻辑或(OR)、!逻辑非(NOT)。</span>
													</td>
												</tr>
											</tbody>
										</table>
										<div><span style="font-size: small;">&nbsp;</span></div>
									</div>
									<blockquote>
										<div><span style="font-size: small;"><span
													style="color: #e30000;">如果两边的操作数有一个操作数不是布尔值的情况下，逻辑与运算就不一定返回布尔值</span>，此时，遵循已下规则：</span>
										</div>
										<div><span style="font-size: small;">&nbsp;</span></div>
										<div><b><span style="font-size: small;">&amp;&amp;逻辑与</span></b></div>
									</blockquote>
									<div>
										<ul>
											<li>
												<ul>
													<li><span style="font-size: small;">第一个操作数是对象，则返回第二个操作数；</span></li>
													<li><span style="font-size: small;">第二个操作数是对象，则第一个操作数返回 true，
															才返回第二个操作数， 否则返回 false;</span></li>
													<li><span style="font-size: small;">有一个操作数是 null，则返回 null；</span>
													</li>
													<li><span style="font-size: small;">有一个操作数是 undefined，则返回
															undefined。</span></li>
												</ul>
											</li>
										</ul>
									</div>
									<blockquote>
										<blockquote>
											<div><span style="font-size: small;">var box = 对象 &amp;&amp; (5 &gt; 4);
													//true，返回第二个操作数</span></div>
										</blockquote>
										<blockquote>
											<div><span style="font-size: small;">var box = (5 &gt; 4) &amp;&amp; 对象;
													//[object Object]</span></div>
										</blockquote>
										<blockquote>
											<div><span style="font-size: small;">var box = (3 &gt; 4) &amp;&amp; 对象;
													//false</span></div>
										</blockquote>
										<blockquote>
											<div><span style="font-size: small;">var box = (5 &gt; 4) &amp;&amp;
													null;&nbsp;</span><a><span
														style="font-size: small;">//null</span></a></div>
										</blockquote>
										<blockquote>
											<div><span style="font-size: small;">&nbsp;</span></div>
										</blockquote>
										<div><b><span style="font-size: small;">||逻辑或</span></b></div>
									</blockquote>
									<div>
										<ul>
											<li>
												<ul>
													<li><span style="font-size: small;">第一个操作数是对象，则返回第一个操作数</span></li>
													<li><span style="font-size: small;">第一个操作数的求值结果为
															false，则返回第二个操作数；</span></li>
													<li><span style="font-size: small;">两个操作数都是对象，则返回第一个操作数；</span></li>
													<li><span style="font-size: small;">两个操作数都是 null，则返回 null；</span>
													</li>
													<li><span style="font-size: small;">两个操作数都是 NaN，则返回 NaN；</span></li>
													<li><span style="font-size: small;">两个操作数都是 undefined，则返回
															undefined；</span></li>
												</ul>
											</li>
										</ul>
									</div>
									<blockquote>
										<blockquote>
											<div><span style="font-size: small;">var box = 对象 || (5 &gt; 3); //[object
													Object]</span></div>
										</blockquote>
										<blockquote>
											<div><span style="font-size: small;">var box = (5 &gt; 3) || 对象;
													//true</span></div>
										</blockquote>
										<blockquote>
											<div><span style="font-size: small;">var box = 对象 1 || 对象 2; //[object
													Object]</span></div>
										</blockquote>
										<blockquote>
											<div><span style="font-size: small;">var box = null || null; //null</span>
											</div>
										</blockquote>
										<blockquote>
											<div><span style="font-size: small;">var box = NaN || NaN; //NaN</span>
											</div>
										</blockquote>
										<blockquote>
											<div><span style="font-size: small;">var box = undefined || undefined;
													//undefined</span></div>
										</blockquote>
										<div><span style="font-size: small;">&nbsp;</span></div>
										<div><b><span style="font-size: small;">!逻辑非&nbsp;</span></b></div>
										<div><span style="font-size: small;">逻辑非运算符可以用于任何值。 无论这个值是什么数据类型，
												这个运算符都会<b><span
														style="color: #0000ff;">返回一个布尔值</span></b>。它的流程是：先将这个值转换成布尔值，然后取反。</span>
										</div>
										<div><span style="font-size: small;">通常来说， 使用一个逻辑非运算符和两个逻辑非运算符可以得到相应的布尔值。</span>
										</div>
									</blockquote>
									<ul>
										<li>
											<ul>
												<li><span style="font-size: small;">操作数是一个对象，返回 false；</span></li>
												<li><span style="font-size: small;">操作数是一个空字符串，返回 true；</span></li>
												<li><span style="font-size: small;">操作数是一个非空字符串，返回 false；</span></li>
												<li><span style="font-size: small;">操作数是数值 0，返回 true；</span></li>
												<li><span style="font-size: small;">操作数是任意非 0 数值(包括
														Infinity)，false；</span></li>
												<li><span style="font-size: small;">操作数是 null，返回 true；</span></li>
												<li><span style="font-size: small;">操作数是 NaN，返回 true；</span></li>
												<li><span style="font-size: small;">操作数是 undefined，返回 true；</span></li>
											</ul>
										</li>
									</ul>
									<div></div>
								</span></li>
							<li><a href="#">其他运算符</a><span>
									<h2><span style="font-size: small;">赋值运算符</span></h2>
									<table width="100%" border="1" cellspacing="0" cellpadding="2">
										<tbody>
											<tr>
												<td valign="top"><span style="font-size: small;">乘/赋(*=) &nbsp;除/赋(/=)
														&nbsp;模/赋(%=) &nbsp;加/赋(+=) &nbsp;减/赋(-=) &nbsp;左移/赋(&lt;&lt;=)
														&nbsp;有符号右移/赋(&gt;&gt;=) &nbsp;无符号有移/赋(&gt;&gt;&gt;=)</span>
												</td>
											</tr>
										</tbody>
									</table>
									<div><span style="font-size: small;">&nbsp;</span></div>
									<div>

										<hr>

									</div>
									<h2><span style="font-size: small;">位操作符</span></h2>
									<div>
										<table width="100%" border="1" cellspacing="0" cellpadding="2">
											<tbody>
												<tr>
													<td valign="top"><span
															style="font-size: small;">~按位非，&amp;按位与，|按位或，^按位异或，&lt;&lt;左移，&gt;&gt;有符号右移，&gt;&gt;&gt;无符号右移</span>
													</td>
												</tr>
											</tbody>
										</table>
										<div><span style="font-size: small;">
											</span><span style="font-size: small;">
											</span></div>
									</div>
									<div>

										<hr>

										<span style="font-size: small;">&nbsp;</span></div>
									<div><b><span style="font-size: small;">其他运算符</span></b></div>
									<div>
										<table width="100%" border="1" cellspacing="0" cellpadding="2">
											<tbody>
												<tr>
													<td valign="top"><span style="font-size: small;">+ 字符串运算符 、 ,逗号运算符
															、三元运算符</span></td>
												</tr>
											</tbody>
										</table>
										<div><span style="font-size: small;">&nbsp;</span></div>
									</div>
									<div><span style="font-size: small;">字符串运算符只有一个，即："+"。它的作用是将两个字符串相加。</span></div>
									<div><span style="font-size: small;">逗号运算符可以在一条语句中执行多个操作。</span></div>
									<div><span style="font-size: small;">三元条件运算符 a ? b : c</span></div>
								</span></li>
							<li><a href="#">运算符优先级</a><span>
									<div><b><span style="font-size: small;">运算符优先级</span></b></div>
									<div><span style="font-size: small;"><span>如果没有使用<strong>圆括号强制优先级</strong>，我们必须遵循以下顺序：
											</span><strong>算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号</strong></span></div>
									<div>
										<table width="100%" border="1" cellspacing="0" cellpadding="2">
											<tbody>
												<tr>
													<td valign="top">
														<div><span style="font-size: small;">运算符</span></div>
													</td>
													<td valign="top">
														<div><span style="font-size: small;">描述</span></div>
													</td>
												</tr>
												<tr>
													<td valign="top">
														<div><span style="font-size: small;">. [] ()&nbsp;</span></div>
													</td>
													<td valign="top">
														<div><span style="font-size: small;">对象成员存取、数组下标、函数调用等</span>
														</div>
													</td>
												</tr>
												<tr>
													<td valign="top">
														<div><span style="font-size: small;">++ -- ~ ! delete new typeof
																void</span></div>
													</td>
													<td valign="top">
														<div><span style="font-size: small;">一元运算符</span></div>
													</td>
												</tr>
												<tr>
													<td valign="top">
														<div><span style="font-size: small;">* / %</span></div>
													</td>
													<td valign="top">
														<div><span style="font-size: small;">乘法、除法、去模</span></div>
													</td>
												</tr>
												<tr>
													<td valign="top">
														<div><span style="font-size: small;">+ - +</span></div>
													</td>
													<td valign="top">
														<div><span style="font-size: small;">加法、减法、字符串连接</span></div>
													</td>
												</tr>
												<tr>
													<td valign="top">
														<div><span style="font-size: small;">&lt;&lt; &gt;&gt;
																&gt;&gt;&gt;</span></div>
													</td>
													<td valign="top">
														<div><span style="font-size: small;">移位</span></div>
													</td>
												</tr>
												<tr>
													<td valign="top">
														<div><span style="font-size: small;">&lt; &lt;= &gt; &gt;=
																instanceof&nbsp;</span></div>
													</td>
													<td valign="top">
														<div><span style="font-size: small;">关系比较、检测类实例</span></div>
													</td>
												</tr>
												<tr>
													<td valign="top">
														<div><span style="font-size: small;">== != === !==</span></div>
													</td>
													<td valign="top">
														<div><span style="font-size: small;">恒等(全等)</span></div>
													</td>
												</tr>
												<tr>
													<td valign="top">
														<div><span style="font-size: small;">&amp;&nbsp;</span></div>
													</td>
													<td valign="top">
														<div><span style="font-size: small;">位与</span></div>
													</td>
												</tr>
												<tr>
													<td valign="top">
														<div><span style="font-size: small;">^&nbsp;</span></div>
													</td>
													<td valign="top">
														<div><span style="font-size: small;">位异或</span></div>
													</td>
												</tr>
												<tr>
													<td valign="top">
														<div><span style="font-size: small;">|</span></div>
													</td>
													<td valign="top">
														<div><span style="font-size: small;">位或</span></div>
													</td>
												</tr>
												<tr>
													<td valign="top">
														<div><span style="font-size: small;">&amp;&amp;</span></div>
													</td>
													<td valign="top">
														<div><span style="font-size: small;">逻辑与</span></div>
													</td>
												</tr>
												<tr>
													<td valign="top">
														<div><span style="font-size: small;">||</span></div>
													</td>
													<td valign="top">
														<div><span style="font-size: small;">逻辑或</span></div>
													</td>
												</tr>
												<tr>
													<td valign="top">
														<div><span style="font-size: small;">?:</span></div>
													</td>
													<td valign="top">
														<div><span style="font-size: small;">三元条件</span></div>
													</td>
												</tr>
												<tr>
													<td valign="top">
														<div><span style="font-size: small;">= x=</span></div>
													</td>
													<td valign="top">
														<div><span style="font-size: small;">赋值、运算赋值</span></div>
													</td>
												</tr>
												<tr>
													<td valign="top">
														<div><span style="font-size: small;">,&nbsp;</span></div>
													</td>
													<td valign="top">
														<div><span style="font-size: small;">多重赋值、数组元素</span></div>
													</td>
												</tr>
											</tbody>
										</table>
									</div>
								</span></li>
						</ul>
						<h4>[<span>-</span>]语句</h4>
						<ul>
							<li><a href="#">Statement</a><span>
									<table>
										<tbody>
											<tr>
												<td width="189"><span style="font-size: small;">类型</span></td>
												<td width="189"><span style="font-size: small;">子类型</span></td>
												<td width="189"><span style="font-size: small;">语法</span></td>
											</tr>
											<tr>
												<td rowspan="2" width="189"><span style="font-size: small;">声明语句</span>
												</td>
												<td width="189"><span style="font-size: small;">变量声明语句</span></td>
												<td width="189"><span
														style="font-size: small;">var&nbsp;box&nbsp;=&nbsp;100;</span>
												</td>
											</tr>
											<tr>
												<td width="189"><span style="font-size: small;">标签声明语句</span></td>
												<td width="189"><span
														style="font-size: small;">label&nbsp;:&nbsp;box;</span></td>
											</tr>
											<tr>
												<td rowspan="4" width="189"><span style="font-size: small;">表达式语句</span>
												</td>
												<td width="189"><span style="font-size: small;">变量赋值语句</span></td>
												<td width="189"><span
														style="font-size: small;">box&nbsp;=&nbsp;100;</span></td>
											</tr>
											<tr>
												<td width="189"><span style="font-size: small;">函数调用语句</span></td>
												<td width="189"><span style="font-size: small;">box();</span></td>
											</tr>
											<tr>
												<td width="189"><span style="font-size: small;">属性赋值语句</span></td>
												<td width="189"><span
														style="font-size: small;">box.property&nbsp;=&nbsp;100;</span>
												</td>
											</tr>
											<tr>
												<td width="189"><span style="font-size: small;">方法调用语句</span></td>
												<td width="189"><span style="font-size: small;">box.method();</span>
												</td>
											</tr>
											<tr>
												<td rowspan="2" width="189"><span style="font-size: small;">分支语句</span>
												</td>
												<td width="189"><span style="font-size: small;">条件分支语句</span></td>
												<td width="189"><span
														style="font-size: small;">if&nbsp;()&nbsp;{}&nbsp;else&nbsp;{}</span>
												</td>
											</tr>
											<tr>
												<td width="189"><span style="font-size: small;">多重分支语句</span></td>
												<td width="189"><span
														style="font-size: small;">switch&nbsp;()&nbsp;{&nbsp;case&nbsp;n&nbsp;:&nbsp;...};</span>
												</td>
											</tr>
											<tr>
												<td rowspan="4" width="189"><span style="font-size: small;">循环语句</span>
												</td>
												<td width="189"><span style="font-size: small;">for&nbsp;</span></td>
												<td width="189"><span
														style="font-size: small;">for&nbsp;(;;;)&nbsp;{}</span></td>
											</tr>
											<tr>
												<td width="189"><span
														style="font-size: small;">for&nbsp;...&nbsp;in</span></td>
												<td width="189"><span
														style="font-size: small;">for&nbsp;(&nbsp;x&nbsp;in&nbsp;x)&nbsp;{}</span>
												</td>
											</tr>
											<tr>
												<td width="189"><span style="font-size: small;">while</span></td>
												<td width="189"><span
														style="font-size: small;">while&nbsp;()&nbsp;{};</span></td>
											</tr>
											<tr>
												<td width="189"><span
														style="font-size: small;">do&nbsp;...&nbsp;while</span></td>
												<td width="189"><span
														style="font-size: small;">do&nbsp;{}&nbsp;while&nbsp;();</span>
												</td>
											</tr>
											<tr>
												<td rowspan="5" width="189"><span style="font-size: small;">控制结构</span>
												</td>
												<td width="189"><span style="font-size: small;">继续执行子句</span></td>
												<td width="189"><span style="font-size: small;">continue&nbsp;;</span>
												</td>
											</tr>
											<tr>
												<td width="189"><span style="font-size: small;">终端执行子句</span></td>
												<td width="189"><span style="font-size: small;">break&nbsp;;</span></td>
											</tr>
											<tr>
												<td width="189"><span style="font-size: small;">函数返回子句</span></td>
												<td width="189"><span style="font-size: small;">return&nbsp;;</span>
												</td>
											</tr>
											<tr>
												<td width="189"><span style="font-size: small;">异常触发子句</span></td>
												<td width="189"><span style="font-size: small;">throw&nbsp;;</span></td>
											</tr>
											<tr>
												<td width="189"><span style="font-size: small;">异常捕获与处理</span></td>
												<td width="189"><span
														style="font-size: small;">try&nbsp;{}&nbsp;catch&nbsp;()&nbsp;{}&nbsp;finally&nbsp;{}</span>
												</td>
											</tr>
											<tr>
												<td width="189"><span style="font-size: small;">其他</span></td>
												<td width="189"><span style="font-size: small;">空语句</span></td>
												<td width="189"><span style="font-size: small;">;</span></td>
											</tr>
											<tr>
												<td width="189">&nbsp;</td>
												<td width="189"><span style="font-size: small;">with语句</span></td>
												<td width="189"><span
														style="font-size: small;">with&nbsp;()&nbsp;{}</span></td>
											</tr>
										</tbody>
									</table>
								</span></li>
							<li><a href="#">Switch</a><span><br>
									1.<a href="https://www.qttc.net/201207151.html">switch中的case为全等判断</a>
									2.多个case使用同一个执行块应写为case 1: case2: ...
								</span></li>
							<li><a href="#"></a><span></span></li>
							<li><a href="#"></a><span></span></li>
							<li><a href="#"></a><span></span></li>
							<li><a href="#"></a><span></span></li>
						</ul>
					</div>
				</li>
			</ul>
			<ul>
				<li>
					<h3>函数<span>-</span></h3>
					<div>
						<h4>[<span>-</span>]内部属性/对象</h4>
						<ul>
							<li><a href="#">arguments</a><span>函数的参数对象
									<div><span style="font-size: small;"><b>argument<span
													style="color: #e30000;">s</span>对象</b>&nbsp;（类数组对象，但检测不是数组类型）</span>
									</div>
									<div>
										<table width="100%" border="1" cellspacing="0" cellpadding="2">
											<tbody>
												<tr>
													<td valign="top">
														<div><span style="font-size: small;">arguments[0]</span></div>
													</td>
													<td valign="top">
														<div><span style="font-size: small;">第一个参数名字</span></div>
													</td>
												</tr>
												<tr>
													<td valign="top">
														<div><span style="font-size: small;">arguments.length</span>
														</div>
													</td>
													<td valign="top">
														<div><span style="font-size: small;">参数的个数</span></div>
													</td>
												</tr>
												<tr>
													<td valign="top">
														<div><span style="font-size: small;">arguments.callee</span>
														</div>
													</td>
													<td valign="top">
														<div><span style="font-size: small;">主体函数本身，拥有这个参数对象的函数</span>
														</div>
													</td>
												</tr>
											</tbody>
										</table>
										<div><strong>&nbsp;</strong></div>
									</div>
								</span></li>
							<li><a href="#">this</a><span>函数执行的环境对象,函数里的函数中的this为window,闭包中调用父级函数指定var that =
									this</span></li>
							<li><a href="#">caller</a><span>调用当前函数的函数</span></li>
							<li><a href="#">length</a><span>函数希望接收的命名参数的个数</span></li>
							<li><a href="#">prototype</a><span>原型属性，不可枚举</span></li>
						</ul>
						<h4>[<span>-</span>]方法</h4>
						<ul>
							<li>fn<a href="#">.apply</a>(obj,arg)<span>func.apply(作用域，[传递参数]/arguments)</span></li>
							<li>fn<a
									href="#">.call</a>(obj,arg)<span>func.call(作用域，[传递参数]),apply与call均让函数作用于特定作用域<br>call必须明确传入每一个参数</span>
							</li>
							<li>fn<a href="#">.bind</a>(obj)<span>bind(作用目标) 创建一个作用于某目标的函数实例</span></li>
						</ul>
						<h4>[<span>-</span>]其他</h4>
						<ul>
							<li><a
									href="#">(function(){})()</a><span>匿名函数自执行,可以初始化各项值,但如果需要的变量并不是一开始初始化有的,则不可以,否则无法读取
										<br><a href="https://www.cnblogs.com/liyongshuai/p/7197962.html">十大排序</a>
									</span>
							</li>
						</ul>
					</div>
				</li>
				<li>
					<h3>面向对象<span>+</span></h3>
					<div>
						<h4>[<span>-</span>]基础概念</h4>
						<ul>
							<li><a href="#">对象创建方法</a><span>
									当对象的属性必须为变量时，则只能使用方括号！
									<br>in遍历访问对象的属性/属性值
									<br>for(var property in obj) {
									<br>console.log(property); //遍历对象的全部属性
									<br>console.log(obj[property]); //遍历所有对象的值
									<br>}
									<div>
										<div>创建对象</div>
										<div>
											<table width="100%" border="1" cellspacing="0" cellpadding="2">
												<tbody>
													<tr>
														<td valign="top">var obj = new Object()
															obj.key = value
															obj.key = function(){}</td>
														<td valign="top">new 运算符</td>
													</tr>
													<tr>
														<td valign="top">var obj ={
															key:value,
															key:function(){}
															}</td>
														<td valign="top">字面量</td>
													</tr>
												</tbody>
											</table>
										</div>
										<div>
											<ol>
												<li>new可以省略，字面量方式中属性key可以有或去掉引号</li>
												<li>对象属性间，不要忘记加逗号分隔</li>
												<li>函数应用于对象时，对象名不需要加引号 &nbsp;function(obj){}</li>
											</ol>
										</div>
									</div>
									<div><b><span style="font-size: small;">对象属性</span></b></div>
									<div>
										<table width="100%" border="1" cellspacing="0" cellpadding="2">
											<tbody>
												<tr>
													<td valign="top"><span style="font-size: small;">obj.key</span></td>
													<td valign="top"><span style="font-size: small;">点表示法</span></td>
												</tr>
												<tr>
													<td valign="top"><span style="font-size: small;">obj['key']</span>
													</td>
													<td valign="top"><span style="font-size: small;">中括号表示法</span></td>
												</tr>
											</tbody>
										</table>
									</div>
									<div>
										<ol>
											<li><span
													style="color: #e30000; font-size: small;"><strong>中括号表示法时，key需要加上引号法</strong></span>
											</li>
											<li><b><span
														style="color: #e30000; font-size: small;">当属性含空格、关键字或为变量时，只能用中括号表示</span></b>
											</li>
											<li><span style="color: #e30000; font-size: small;"><b>删除属性delete
														obj.key</b></span></li>
										</ol>
									</div>
								</span></li>
							<li><a href="#">对象内部属性</a><span>
									<div>
										<div>
											<div>
												<div>
													<div>
														<table width="88%" border="1" cellspacing="0" cellpadding="2">
															<tbody>
																<tr>
																	<td valign="top"><span
																			style="font-size: small;">数据属性</span></td>
																	<td valign="top"><span
																			style="font-size: small;">configurable
																			能否删除或修改操作 true/false</span></td>
																</tr>
																<tr>
																	<td valign="top"></td>
																	<td valign="top"><span
																			style="font-size: small;">enumerable
																			能否通过for-in枚举遍历&nbsp;true/false</span></td>
																</tr>
																<tr>
																	<td valign="top"></td>
																	<td valign="top"><span
																			style="font-size: small;">writable
																			属性值是否可写&nbsp;true/false</span></td>
																</tr>
																<tr>
																	<td valign="top"></td>
																	<td valign="top"><span
																			style="font-size: small;">value 包含属性的数据值
																			undefined</span></td>
																</tr>
																<tr>
																	<td valign="top"><span
																			style="font-size: small;">访问属性</span></td>
																	<td valign="top"><span
																			style="font-size: small;">configurable
																			能否删除或修改操作&nbsp;true/false</span></td>
																</tr>
																<tr>
																	<td valign="top"></td>
																	<td valign="top"><span
																			style="font-size: small;">enumerable
																			能否通过for-in枚举遍历&nbsp;true/false</span></td>
																</tr>
																<tr>
																	<td valign="top"></td>
																	<td valign="top"><span
																			style="font-size: small;">get:
																			读取属性时调用的函数&nbsp;undefined</span></td>
																</tr>
																<tr>
																	<td valign="top"></td>
																	<td valign="top"><span
																			style="font-size: small;">set:
																			写入属性时调用的函数&nbsp;undefined</span></td>
																</tr>
																<tr>
																	<td valign="top"><span
																			style="font-size: small;">设置某类属性</span></td>
																	<td valign="top"><strong><span
																				style="font-size: small;">Object.defineProperty(对象名,属性名,{设置块})</span></strong>
																	</td>
																</tr>
																<tr>
																	<td valign="top"><span
																			style="font-size: small;">设置两类属性</span></td>
																	<td valign="top">
																		<div><strong><span
																					style="font-size: small;">Object.defineProperties(对象名,{</span></strong>
																		</div>
																		<div><strong><span
																					style="font-size: small;">属性名:{设置块},</span></strong>
																		</div>
																		<div><strong><span
																					style="font-size: small;">})</span></strong>
																		</div>
																	</td>
																</tr>
															</tbody>
														</table>
													</div>
													<div><span
															style="font-size: small;">configurable，enumerable，writable等默认属性为true，<strong>一旦启用设置函数即使没定义也全部设置为false.</strong></span>
													</div>
												</div>
											</div>
										</div>
									</div>
								</span></li>
							<li><a href="#">函数创建方法</a><span>
								</span></li>
							<li><a href="#">函数特征说明</a><span>
								</span></li>
							<li><a href="#">变量与作用域</a><span>
								</span></li>
							<li><a href="#">匿名函数与块级作用域</a><span>
								</span></li>
							<li><a href="#">闭包与内存泄露</a><span>
								</span></li>
							<li><a href="#">私有变量与模块模式</a></li>
							<li><a href="#">构造方法</a></li>
							<li><a href="#">继承方法</a></li>
						</ul>
					</div>
				</li>
			</ul>
			<ul>
				<li>
					<h3>字符串<span>-</span></h3>
					<div>
						<h4>[<span>-</span>]字符位置</h4>
						<ul>
							<li><a href="#">charAt(N)</a><span>返回索引上的字符</span></li>
							<li><a href="#">charCodeAt(N)</a><span>返回在指定的位置的字符的 Unicode 编码</span></li>
							<li><a href="#">indexOf("A",n)</a><span>返回索引位置，正向查找字符所在的索引</span></li>
							<li><a href="#">lastIndexOf("A",n)</a><span>返回索引位置，逆向查找</span></li>
						</ul>
						<h4>[<span>-</span>]位置筛选</h4>
						<ul>
							<li><a href="#">slice / substring(n,m)</a><span>显示索引范围内的字符串，返回新字符串，包含起始不包含结尾</span></li>
							<li><a href="#">substr(n,x)</a><span>显示指定索引起范围内的字符串，返回新字符串
									<br>slice / substring / substr 负数
									<br>单个负数：
									<br>alert(box.slice(-3)); //Lee，6+(-3)=3 位开始 length-n
									<br>alert(box.substring(-3)); //Mr.Lee 负数返回全部 返回全部
									<br>alert(box.substr(-3)); //Lee，6+(-3)=3 位开始 length-n
									<br>第二位负数：
									<br>alert(box.slice(3, -1)); //Le 6+(-1)=5, (3,5) a,length-n
									<br>alert(box.substring(3, -1)); //Mr. 第二参为负，直接转 0，并且方法会把较小的数字提前，(0,3) a,0
									<br>alert(box.substr(3, -1)); //'' 第二参数为负，直接转 0 ，(3,0) a,0
								</span></li>
						</ul>
						<h4>[<span>-</span>]匹配替换</h4>
						<ul>
							<li><a href="#">match(正则/匹配值)</a><span>返回数组，没找到则返回null，正则识别全局</span></li>
							<li><a href="#">search(正则/匹配值)</a><span>返回起始的索引，没找到则返回-1，始终从头开始找，找到一个即返回，正则无需全局设置 strt
								</span></li>
							<li><a href="#">replace(正则/匹配值,"替换目标")
								</a><span>返回新字符串对象，识别正则全局，function可内含一个switch控制流</span></li>
						</ul>
						<h4>[<span>-</span>]串联分割</h4>
						<ul>
							<li><a href="#">concat()</a><span>返回新字符串，串联</span></li>
							<li><a href="#">split(*/正则,N)</a><span>返回数组，把字符串按指定符号或正则分割为字符串数组</span></li>
						</ul>
						<h4>[<span>-</span>]其他方法</h4>
						<ul>
							<li><a href="#">trim()</a><span>返回新字符串，删除前置与后置空格</span></li>
							<li><a href="#">toUpperCase()</a><span>返回新字符串，转换大写 toLocaleUpperCase()</span></li>
							<li><a href="#">toLowerCase()</a><span>返回新字符串，转换小写 toLocaleLowerCase() </span></li>
							<li><a href="#">localeCompare()</a><span>大写小写，在之后（大于），返回1，在之前（小于），返回-1，相等，返回0</span></li>
							<li><a href="#">String.fromCharCode(编码)</a><span>返回编码转回的字符串</span></li>
						</ul>
						<h4>[<span>-</span>]数字</h4>
						<ul>
							<li><a href="#">Finity</a><span>
									Finity&nbsp;isFinite(---) 判断是否为无穷
									<table border="1" cellspacing="0" cellpadding="2">
										<tbody>
											<tr>
												<td valign="top">
													最大值</td>
												<td valign="top">
													Number.MAX_VALUE 1.79e+308</td>
											</tr>
											<tr>
												<td valign="top">
													<div>最小值</div>
												</td>
												<td valign="top">
													Number.MIN_VALUE 5e-324</td>
											</tr>
											<tr>
												<td valign="top">
													<div>正无穷</div>
												</td>
												<td valign="top">
													Number.POSITIVE_INFINITY</td>
											</tr>
											<tr>
												<td valign="top">
													<div>负无穷</div>
												</td>
												<td valign="top">
													Number.NEGATIVE_INFINITY</td>
											</tr>
										</tbody>
									</table>
									<ul>
										<li>科学计数法，浮点数+e+10的指数</li>
										<li>0/0=NaN，正数/0=正无穷，负数/0=负无穷</li>
										<li>正无穷+正无穷=正无穷，负无穷+负无穷=负无穷，正无穷+负无穷=NaN</li>
										<li>无穷乘法操作得到无穷，无穷除法与求余操作得到NaN</li>
									</ul>
								</span></li>
							<li><a href="#">NaN</a><span>
									NaN&nbsp;isNaN(---) 判断是否为NaN
									<table border="1" cellspacing="0" cellpadding="2">
										<tbody>
											<tr>
												<td valign="top">Number.NaN</td>
												<td valign="top">
													得到 NaN 值</td>
											</tr>
											<tr>
												<td valign="top">
													var box = 0 / 0; //NaN
													var box = 12 / 0; //Infinity
													var box = 12 / 0 * 0; //NaN</td>
												<td valign="top">
													任何与 NaN 进行运算的结果均为 NaN</td>
											</tr>
											<tr>
												<td valign="top">alert(NaN == NaN) //false</td>
												<td valign="top">NaN 与自身不相等(NaN 不与任何值相等)</td>
											</tr>
										</tbody>
									</table>
									<ul>
										<li>isNaN()函数也适用于对象。</li>
										<li>在调用 isNaN()函数过程中，首先会调用 valueOf()方法， 然后确定返回值是否能够转换成数值。如果不能，则基于这个返回值再调用
											toString()方法，再测试返回值。</li>
										<li>只要NaN参与的运算均为NaN</li>
									</ul>
								</span></li>
							<li><a href="#">toFixed(N)</a><span>把数字转换为字符串，结果的小数点后有指定位数的数字。</span></li>
							<li><a href="#">toString(进制)</a><span>把数字转换为字符串，使用指定的基数。</span></li>
							<li><a href="#">toLocaleString()</a><span>根据本地数字格式转换为字符串 1,000.789</span></li>
							<li><a href="#">toExponential(N)</a><span>把对象的值转换为指数计数法。N小数点后位数</span></li>
							<li><a href="#">toPrecision(N)</a><span>把数字格式化为指定的长度。N为显示位数，自动选择toFixed()
									toExponential(N)两者之一。</span></li>
						</ul>
					</div>
				</li>
				<li>
					<h3>内置对象<span>-</span></h3>
					<div>
						<h4>[<span>-</span>]正则表达式</h4>
						<ul>
							<li><a href="#">test()</a><span>在字符串中测试模式匹配，返回 true 或 false</span></li>
							<li><a href="#">exec()</a><span>在字符串中执行匹配搜索，返回结果数组或null</span></li>
						</ul>
						<h4>[<span>-</span>]数学</h4>
						<ul>
							<li><a href="#">random()</a><span>
									1.随机颜色16进制：Math.floor( Math.random() * 16777215 ).toString( 16 )
									2.2个值之间的随机值：function random(min,max){return min + (max-min)*Math.random();}
								</span></li>
							<li><a href="#">ceil()</a></li>
							<li><a href="#">floor()</a></li>
							<li><a href="#">round()</a></li>
							<li><a href="#">sqrt()</a></li>
						</ul>
						<h4>[<span>-</span>]日期</h4>
						<ul>
							<li><a href="#">getFullYear()</a></li>
							<li><a href="#">getMonth()</a>[0-11]</li>
							<li><a href="#">getDate()</a></li>
							<li><a href="#">getDay()</a>[0-6]</li>
							<li><a href="#">getHours()</a></li>
							<li><a href="#">getMinutes()</a></li>
							<li><a href="#">getSeconds()</a></li>
							<li><a href="#">getMilliseconds()</a></li>
							<li><a href="#">getTime()</a></li>
							<li><a href="#">parse()</a></li>
							<li><a href="#">toString</a></li>
							<li><a href="#">toUTCString</a></li>
						</ul>
					</div>
				</li>
			</ul>
			<ul>
				<li>
					<h3>数组<span>-</span></h3>
					<div>
						<h4>[<span>-</span>]基本概念</h4>
						<ul>
							<li><a href="#">创建方法</a><span><strong><span style="font-size: small;">创建方式</span></strong>
									<div>
										<div>
											<table width="88%" border="1" cellspacing="0" cellpadding="2">
												<tbody>
													<tr>
														<td valign="top"><span style="font-size: small;">构造函数</span>
														</td>
														<td valign="top">
															<div><span style="font-size: small;">var arr = new
																	Array();</span></div>
															<div><span
																	style="font-size: small;">arr[0]=value<strong>;</strong>&nbsp;</span>
															</div>
															<div>
																<pre xml:space="preserve"></pre>
																<div><span style="font-size: small;">var arr = new
																		Array(<em>element0</em>,&nbsp;<em>element1</em>,
																		...,&nbsp;<em>elementn</em>);</span></div>
															</div>
															<div><span style="font-size: small;">var arr = new
																	Array(<em>size</em>);
																	&nbsp;[size=数组项目的个数,只写1位,且必须是数字]</span></div>
														</td>
													</tr>
													<tr>
														<td valign="top"><span style="font-size: small;">字面量</span></td>
														<td valign="top"><span style="font-size: small;">var arr =
																[66,80,90,77,59]</span></td>
													</tr>
												</tbody>
											</table>
										</div>
										<div><span style="font-size: small;">&nbsp;</span></div>
										<div>
											<div><span style="font-size: small;"><strong>注意：</strong><br
														clear="none">1.&nbsp;ECMAScript中的数组每个元素可以保存任何类型</span></div>
											<div><span style="font-size: small;">2. ECMAScript 中数组的大小也是可以调整的。</span>
											</div>
											<div><span style="font-size: small;">3.&nbsp;var arr = new
													Array(<em>10</em>) &nbsp;不等于&nbsp;var arr = [10]</span></div>
										</div>
									</div>
								</span></li>
							<li><a href="#">.length</a><span>
									<div><b><span style="font-size: small;">数组属性·长度Length</span></b></div>
									<div>
										<table width="100%" border="1" cellspacing="0" cellpadding="2">
											<tbody>
												<tr>
													<td valign="top"><span style="font-size: small;">str.length</span>
													</td>
													<td valign="top"><span style="font-size: small;">字符串长度</span></td>
												</tr>
												<tr>
													<td valign="top"><b><span
																style="font-size: small;">arr.length</span></b></td>
													<td valign="top"><span style="font-size: small;">数组长度</span></td>
												</tr>
												<tr>
													<td valign="top"><span
															style="font-size: small;">function.length</span></td>
													<td valign="top"><span style="font-size: small;">参数长度/个数</span></td>
												</tr>
												<tr>
													<td valign="top"><span style="font-size: small;">object &amp;
															number类型无length</span></td>
													<td valign="top"></td>
												</tr>
											</tbody>
										</table>
										<div><span style="font-size: small;">&nbsp;</span></div>
									</div>
									<div><span style="font-size: small;">&nbsp;</span></div>
								</span></li>
							<li><a href="#">[index]</a><span>
									<div><b><span style="font-size: small;">数组下标</span></b></div>
									<table width="100%" border="1" cellspacing="0" cellpadding="2">
										<tbody>
											<tr>
												<td valign="top">
													<div><span style="font-size: small;">var &nbsp;box =[];</span></div>
													<div><span style="font-size: small;">box['name']=iRuxu;</span></div>
													<div><span style="font-size: small;">alert(box);
															&nbsp;</span><a><span
																style="font-size: small;">//空</span></a></div>
													<div><span
															style="font-size: small;">alert(box['name']);&nbsp;</span><a><span
																style="font-size: small;">//iRuxu</span></a></div>
													<div><span
															style="font-size: small;">alert(box[0]);&nbsp;</span><a><span
																style="font-size: small;">//iRuxu</span></a><span
															style="font-size: small;">&nbsp;</span></div>
												</td>
											</tr>
										</tbody>
									</table>
									<div><span
											style="font-size: small;">如果是字符串下标，不会体现在数组上，需要指定下标键打印，如果是索引下标，则可以直接打印</span>
									</div>
									<div><span style="font-size: small;">&nbsp;</span></div>
									<div><b><span style="font-size: small;">数组方法I</span></b></div>
								</span></li>
						</ul>
						<h4>[<span>-</span>]添加移除</h4>
						<ul>
							<li><a href="#">push()</a><span>栈：后方添加项目，返回总数。</span></li>
							<li><a href="#">pop()</a><span>栈：后方移除项目，返回移除项。</span></li>
							<li><a href="#">unshift()</a><span>队列：前方添加项目，返回总数。</span></li>
							<li><a href="#">shift()</a><span>队列：前方移除项目，返回移除项。</span></li>
						</ul>
						<h4>[<span>-</span>]串联分割</h4>
						<ul>
							<li><a href="#">concat()</a><span>连接两个或更多的数组，并返回结果，返回新数组。（合并数组-&gt;新）</span></li>
							<li><a href="#">slice</a>(n,m)<span>从某个已有的数组返回选定的元素，返回新数组。（过滤数组-&gt;新）
									<br>当含1个参数时，起始到末尾全部：slice(1)——索引为1开始到末尾
									<br>当含2个参数时，起始到末尾-1：slice(1,4)——索引为1~3，不包含4</span></li>
							<li><a href="#">splice</a>(n,m,[val])<span>
									方法向/从数组中添加/删除/替换项目，然后返回被删除的项目。
									<br>注释：请注意，splice() 方法与 slice() 方法的作用是不同的，splice()方法会直接对数组进行修改。
									<br>第1个参数为起始索引位置，第2个参数为删除的数目，当数目为0时则为添加项目，第3个参数开始为添加新的项目（如只删除无此参数）。
									<br>splice(0,1)——位置0删除1项
									<br>splice(2,0,arr1,arr2) ——位置2开始添加2项
									<br>splice(1,1,100) —— 位置1删除并添加1项
								</span></li>
							<li><a href="#">join</a>(符号)<span>把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。</span></li>
						</ul>
						<h4>[<span>-</span>]排序</h4>
						<ul>
							<li><a href="#">reverse()</a><span>反转</span></li>
							<li><a href="#">sort()</a><span>默认升序排列</span></li>
							<li><a href="#">sort</a>(fn)<span>严格升序或降序排列
									<br>function sortNumber(a,b){return a - b //降序b-a}
									<br>sort方法参数如果提供一个函数，那么该函数必须返回以下值之一：
									<br>负值，所传递的第一个参数比第二个参数小；
									<br>正值，所传递的第一个参数比第二个参数大；
									<br>零，两个参数相等。</span></li>
						</ul>
						<h4>[<span>-</span>]查找位置</h4>
						<ul>
							<li><a href="#">indexOf</a>(value,n)<span>正向查找,n为起始索引,如查找不到则返回-1</span></li>
							<li><a href="#">lastIndexOf</a>(value,n)<span>逆向查找 </span></li>
						</ul>
						<h4>[<span>-</span>]迭代方法</h4>
						<ul>
							<li><a href="#">every</a>(fn[item,index,arr])<span>每一项为true，返回true
									<br>arr.every(function(item,index,array){
									<br>要求
									<br>})</span></li>
							<li><a href="#">some</a>(fn[item,index,arr])<span>某一项为true，返回true
									<br>arr.some(function(item,index,array){
									<br>要求
									<br>})</span></li>
							<li><a href="#">filter</a>(fn[item,index,arr])<span>
									返回为true的新数组，按某个函数方法过滤
									<br>arr.filter(function(item,index,array){
									<br>要求
									<br>})</span></li>
							<li><a href="#">map</a>(fn[item,index,arr])<span>返回执行函数后的新数组
									<br>arr.map(function(item,index,array){
									要求
									<br>})</span></li>
							<li><a href="#">forEach</a>(fn[item,index,arr])<span>遍历数组去执行某个函数，无返回值
									<br>arr.forEach(function(item,index,array){
									<br>要求
									<br>})</span></li>

						</ul>
						<h4>[<span>-</span>]递归方法</h4>
						<ul>
							<li><a href="#">reduce</a><span>返回正向函数执行后的归并值
									arr.reduce(function(prev,cur,index,array){
									<br>return prev+cur;
									<br>})</span></li>
							<li><a href="#">reduceRight</a><span>
									<br>var arr=[1,2,3]
									<br>var sum=arr.reduce(function(prev,cur,index,array){
									<br>return prev+cur;
									<br>})
									<br>alert(sum); //6
								</span></li>
						</ul>
						<h4>[<span>-</span>]多维数组</h4>
						<ul>
							<li><a href="#">二维数组</a><span>
									<textarea name="" id="" cols="60" rows="10">声明1维，1维循环（声明2维，2维循环），循环条件中参数使用分号，索引号与长度关系。
					var myarr=new Array(); //先声明一维 
					for(var i=0;i&lt;x;i++){ 一维长度="" myarr[i]="new" array();="" 在声明二维="" for(var="" j="0;j&lt;y;j++){" 二维长度="" myarr[i][j]="i+j;" 赋值，每个数组元素的值为i+j="" }="" &lt;="" textarea=""&gt;
				&lt;/x;i++){&gt;</textarea></span></li>
						</ul>
					</div>
				</li>
				<li>
					<h3>遍历查询<span>-</span></h3>
					<div>
						<h4>[<span>-</span>]Underscore</h4>
						<ul>
							<li><a href="#"></a><span></span></li>
						</ul>
					</div>
				</li>
			</ul>
			<ul>
				<li>
					<h3>BOM<span>-</span></h3>
					<div>
						<h4>[<span>-</span>]Window</h4>
						<ul>
							<li><a href="#">window properties</a><span>

									<div>
										<ol>
											<li><span style="font-size: small;">window 对象有一系列的属性，这些属性本身也是对象。</span></li>
											<li><span style="font-size: small;">window 下的属性和方法，可以使用
													window.属性、window.方法()或者直接属性、方法()的方式调用。例如：window.alert()和
													alert()是一个意思。</span></li>
											<li><span
													style="font-size: small;">全局变量不能通过delete操作符删除，而直接在window对象上定义的属性可以，但实际上全局定义归属于对window定义</span>
											</li>
											<li><span
													style="font-size: small;">尝试访问未声明的变量会抛出错误，但是可以通过查询window对象知道某个可能未声明的变量是否存在。</span>
											</li>
										</ol>
									</div>
									<div><span style="font-size: small;">&nbsp;</span></div>
									<div>
										<ul>
											<li><b><span style="font-size: small;">window 对象的属性</span></b></li>
										</ul>
									</div>
									<div>
										<table width="100%" border="1" cellspacing="0" cellpadding="2">
											<tbody>
												<tr>
													<td valign="top"><span style="font-size: small;">内容</span></td>
													<td valign="top"></td>
												</tr>
												<tr>
													<td valign="top">
														<div><b><span style="font-size: small;">document</span></b>
														</div>
													</td>
													<td valign="top">
														<div><span style="font-size: small;">窗口中当前显示的文档对象</span></div>
													</td>
												</tr>
												<tr>
													<td valign="top">
														<div><b><span style="font-size: small;">location</span></b>
														</div>
													</td>
													<td valign="top">
														<div><span style="font-size: small;">当前窗口的 URL</span></div>
													</td>
												</tr>
												<tr>
													<td valign="top">
														<div><b><span style="font-size: small;">history</span></b></div>
													</td>
													<td valign="top">
														<div><span style="font-size: small;">保存有窗口最近加载的 URL</span></div>
													</td>
												</tr>
												<tr>
													<td valign="top">
														<div><b><span
																	style="color: #0000ff; font-size: small;">screen</span></b>
														</div>
													</td>
													<td valign="top">
														<div><span
																style="font-size: small;">显示屏幕相关信息，如高度、宽度（以像素为单位）</span>
														</div>
													</td>
												</tr>
												<tr>
													<td valign="top">
														<div><span style="font-size: small;">Navigator</span></div>
													</td>
													<td valign="top">
														<div><span style="font-size: small;">对 Navigator
																对象的只读引用&nbsp;navigator.userAgent</span></div>
													</td>
												</tr>
												<tr>
													<td valign="top">
														<div><span style="font-size: small;">offscreenBuffering</span>
														</div>
													</td>
													<td valign="top">
														<div><span
																style="font-size: small;">用于绘制新窗口内容并在完成后复制已存在的内容，控制屏幕更新</span>
														</div>
													</td>
												</tr>
												<tr>
													<td valign="top"><span style="font-size: small;">层级</span></td>
													<td valign="top"></td>
												</tr>
												<tr>
													<td valign="top">
														<div><b><span style="font-size: small;">name</span></b></div>
													</td>
													<td valign="top">
														<div><span style="font-size: small;">窗口名</span></div>
													</td>
												</tr>
												<tr>
													<td valign="top">
														<div><b><span style="font-size: small;">opener</span></b></div>
													</td>
													<td valign="top">
														<div><span style="font-size: small;">打开当前窗口的窗口</span></div>
													</td>
												</tr>
												<tr>
													<td valign="top">
														<div><span style="font-size: small;">self
																/&nbsp;<b>window</b></span></div>
													</td>
													<td valign="top">
														<div><span style="font-size: small;">指示当前窗口 /&nbsp;指示当前窗口，与 self
																等效</span></div>
													</td>
												</tr>
												<tr>
													<td valign="top">
														<div><span style="font-size: small;">frames</span></div>
													</td>
													<td valign="top">
														<div><span style="font-size: small;">窗口中的框架对象数组</span></div>
														<div><span style="font-size: small;">frames[] &nbsp;
																&nbsp;frames.length 存放数组 frames[] 中含有的元素个数 &nbsp;
																&nbsp;top.frames[n] 页面第几个框架</span></div>
													</td>
												</tr>
												<tr>
													<td valign="top">
														<div><span style="font-size: small;">length</span></div>
													</td>
													<td valign="top">
														<div><span style="font-size: small;">窗口中的框架数</span></div>
													</td>
												</tr>
												<tr>
													<td valign="top">
														<div><span style="font-size: small;">parent</span></div>
													</td>
													<td valign="top">
														<div><span style="font-size: small;">指向包含另一个窗口的窗口（由框架使用）</span>
														</div>
													</td>
												</tr>
												<tr>
													<td valign="top">
														<div><span style="font-size: small;">top</span></div>
													</td>
													<td valign="top">
														<div><span style="font-size: small;">包含特定窗口的最顶层窗口（由框架使用）</span>
														</div>
													</td>
												</tr>
												<tr>
													<td valign="top"><span style="font-size: small;">状态</span></td>
													<td valign="top"></td>
												</tr>
												<tr>
													<td valign="top">
														<div><b><span style="font-size: small;">closed</span></b></div>
													</td>
													<td valign="top">
														<div><span style="font-size: small;">当窗口关闭时为真</span></div>
													</td>
												</tr>
												<tr>
													<td valign="top">
														<div><span style="font-size: small;">defaultStatus</span></div>
													</td>
													<td valign="top">
														<div><span style="font-size: small;">窗口底部状态栏显示的默认状态消息（IE）</span>
														</div>
													</td>
												</tr>
												<tr>
													<td valign="top">
														<div><span style="font-size: small;">status</span></div>
													</td>
													<td valign="top">
														<div><span
																style="font-size: small;">描述由用户交互导致的状态栏的临时消息（IE）</span>
														</div>
													</td>
												</tr>
											</tbody>
										</table>
										<div><span style="font-size: small;">&nbsp;</span></div>
									</div>
								</span></li>
							<li><a href="#">alert/confirm/prompt()</a><span>
									<table width="100%" border="1" cellspacing="0" cellpadding="2">
										<tbody>
											<tr>
												<td valign="top"><span style="font-size: small;">系统对话框</span></td>
												<td valign="top"><span style="font-size: small;">&nbsp;</span></td>
											</tr>
											<tr>
												<td valign="top">
													<div><span style="font-size: small;"><b>alert</b>(text)</span></div>
												</td>
												<td valign="top">
													<div><span style="font-size: small;">警告</span></div>
												</td>
											</tr>
											<tr>
												<td valign="top">
													<div><span style="font-size: small;"><b>confirm</b>(text)</span>
													</div>
												</td>
												<td valign="top">
													<div><span style="font-size: small;">确认/取消
															&nbsp;返回布尔值：true,false</span></div>
												</td>
											</tr>
											<tr>
												<td valign="top">
													<div><span
															style="font-size: small;"><b>prompt</b>(text,defaultInput)</span>
													</div>
												</td>
												<td valign="top">
													<div><span style="font-size: small;">输入框
															返回值：确认&gt;内容，取消&gt;null</span></div>
												</td>
											</tr>
											<tr>
												<td valign="top">
													<div><span style="font-size: small;">print()</span></div>
												</td>
												<td valign="top"><span style="font-size: small;">打印</span></td>
											</tr>
											<tr>
												<td valign="top">
													<div><span style="font-size: small;">find()</span></div>
												</td>
												<td valign="top"><span style="font-size: small;">查找</span></td>
											</tr>
										</tbody>
									</table>
								</span></li>
							<li><a href="#">open</a>(url,name,[options])<span>
									window.open(url,name,[options]) 打开一个新窗口并返回新 window 对象，将open()赋值给一个变量，对变量可以执行对子窗口的设置
									<br>■open方法 window.open("URL", "位置", "属性","历史记录");
									<br>使用 window.open()方法可以导航到一个特定的 URL， 也可以打开一个新的浏览器窗口 。它可以接受四个参数：
									<br>1.URL https://www.baidu.com
									<br>2.窗口名称或窗口目标 _target / _parent / somename
									<br>3.一个特性字符串，见下表
									<br>4.一个表示新页面是否取代浏览器记录中当前加载页面的布尔值：true替换历史记录，false创建新历史记录
								</span></li>

						</ul>
						<h4>[<span>-</span>]定时器</h4>
						<ul>
							<li><a href="#">setTimeout</a>(fn,time)<span>设置延迟多久执行，一次性行为</span></li>
							<li><a href="#">clearTimeout(x)</a></li>
							<li><a href="#">setInterval</a>(fn,time)<span>设置间隔多久执行</span></li>
							<li><a href="#">clearInterval(x)</a></li>
						</ul>
						<h4>[<span>-</span>]其他</h4>
						<ul>
							<li><a href="#">location</a><span>
									location.href 地址
									<br>location.reload() 重新加载
								</span></li>
							<li><a href="#">encodeURIComponent</a>(url)<span></span></li>
							<li><a href="#">decodeURIComponent</a>(url)<span></span></li>
							<li><a href="#">history.go(n)</a><span></span></li>
						</ul>
					</div>
				</li>
				<li>
					<h3>事件<span>-</span></h3>
					<div>
						<h4>[<span>-</span>]动画</h4>
						<ul>
							<li><a href="#">手机端需添加-webkit-前缀</a><span></span></li>
							<li><a href="#">transitionend</a><span>CSS 完成过渡后触发</span></li>
							<li><a href="#">animationend</a><span>CSS动画结束播放时触发</span></li>
							<li><a href="#">animationiteration</a><span>CSS 动画重复播放时触发</span></li>
							<li><a href="#">animationstart</a><span>CSS 动画开始播放时触发</span></li>
						</ul>
						<h4>[<span>-</span>]移动端</h4>
						<ul>
							<li><a href="#">onorientationchange</a><span>
									屏幕旋转事件，检测终端类型
									<br>var screenStatus = "onorientationchange" in window ? "orientationchange" :
									"resize";
									<br>window.orientation = 90/-90为横屏
								</span></li>
							<li><a href="#">touchstart</a><span>当手指接触屏幕时触发</span></li>
							<li><a href="#">touchmove</a><span>当已经接触屏幕的手指开始移动后触发</span></li>
							<li><a href="#">touchend</a><span>当手指离开屏幕时触发</span></li>
							<li><a href="#">gesturestart</a><span>当两个手指接触屏幕时触发</span></li>
							<li><a href="#">gesturechange</a><span>当两个手指接触屏幕后开始移动时触发</span></li>
							<li><a href="#">gestureend</a><span>当两个手指离开屏幕时触发</span></li>
							<li><a href="#">orientationchange </a><span>检测触摸屏幕的手指何时改变方向</span></li>
							<li><a href="#"></a><span></span></li>
							<li><a href="#"></a><span></span></li>
							<li><a href="#"></a><span></span></li>
							<li><a href="#"></a><span></span></li>
							<li><a href="#"></a><span></span></li>
						</ul>
						<h4>[<span>-</span>]Form</h4>
						<ul>
							<li><a href="#"></a><span></span></li>
						</ul>
						<h4>[<span>-</span>]鼠标</h4>
						<ul>
							<li><a href="#"></a><span></span></li>
						</ul>
						<h4>[<span>-</span>]键盘</h4>
						<ul>
							<li><a href="#"></a><span></span></li>
						</ul>
					</div>
				</li>
			</ul>
			<ul>
				<li>
					<h3>DOM<span>-</span></h3>
					<div>
						<h4>[<span>-</span>]CSS</h4>
						<ul>
							<li><a href="#">.clientWidth</a><span>返回内容的可视宽度（不包括边框，边距或滚动条）<br>
									document.body.clientWidth; 在页面上返回内容的可视宽度（不包括边框，边距或滚动条）<br>
									document.body.clientHeight; 在页面上返回内容的可视高度（不包括边框，边距或滚动条）<br>兼容：clientWidth=
									document.documentElement.clientWidth|| document.body.clientWidth;
									在页面上返回内容的可视宽度（不包括边框，边距或滚动条）</span></li>
							<li><a href="#">.clientHeight</a><span>返回内容的可视高度（不包括边框，边距或滚动条）</span></li>
							<li><a href="#">.offsetWidth</a><span>返回元素的宽度，包括边框和padding，但不包括margin</span></li>
							<li><a href="#">.offsetHeight</a><span>返回元素的高度，包括边框和padding，但不包括margin</span></li>
							<li><a href="#">.scrollWidth</a><span>返回元素的整个宽度（包括带滚动条的隐蔽的地方）<br>
									document.body.scrollWidth; 返回元素的整个宽度（包括带滚动条的隐蔽的地方）<br>
									document.body.scrollHeight; 返回整个元素的高度（包括带滚动条的隐蔽的地方）<br>
									兼容：scrollWidth=document.documentElement.scrollWidth|| document.body.scrollWidth;
									返回元素的整个宽度（包括带滚动条的隐蔽的地方）
								</span></li>
							<li><a href="#">.scrollHeight</a><span>返回整个元素的高度（包括带滚动条的隐蔽的地方）</span></li>
							<li><a href="#">.scrollTop</a><span>滚动条滚动距离
									<br>IE低版本document.documentElement.scrollTop
									<br>现代浏览器document.body.scrollTop
								</span></li>
							<li><a href="#">.scrollLeft</a><span>返回当前视图中的实际元素的左边缘和左边缘之间的距离</span></li>
							<li><a href="#">.offsetParent</a><span>返回元素的偏移容器</span></li>
							<li><a href="#">.offsetTop</a><span>返回当前元素的相对垂直偏移</span></li>
							<li><a href="#">.offsetLeft</a><span>返回当前元素的相对水平偏移</span></li>
							<li><a href="#"></a><span></span></li>
							<li><a href="#"></a><span></span></li>
							<li><a href="#"></a><span></span></li>
						</ul>
						<h4>[<span>-</span>]文档处理</h4>
						<ul>
							<li><a href="#">.cookie</a><span></span></li>
							<li><a href="#">.lastModified</a><span></span></li>
							<li><a href="#">.readyState</a><span></span></li>
							<li><a href="#">createElement()</a><span></span></li>
							<li><a href="#">createTextNode()</a><span></span></li>
							<li><a href="#">createAttribute()</a><span></span></li>
							<li><a href="#">normalize()</a><span></span></li>
							<li><a href="#">getElementById()</a><span></span></li>
							<li><a href="#">getElementsByName()</a><span></span></li>
							<li><a href="#">getElementsByTagName()</a><span></span></li>
							<li>document.<a href="#">querySelector("#selector")</a><span></span></li>
							<li>document.<a href="#">querySelectorAll(".selector")</a><span></span></li>
							<li><a href="#">write()</a><span></span></li>
						</ul>
						<h4>[<span>-</span>]DOM方法</h4>
						<ul>
							<li><a href="#">getAttribute</a>('attr')<span></span></li>
							<li><a href="#">setAttribute</a>('attr',val)<span></span></li>
							<li><a href="#">.innerHTML</a><span></span></li>
							<li><a href="#">.nodeName</a><span></span></li>
							<li><a href="#">.nodeValue</a><span></span></li>
							<li><a href="#">.nodeType</a><span></span></li>
							<li><a href="#">.attributes</a><span></span></li>
							<li><a href="#">.children[n]</a><span></span></li>
							<li><a href="#">.childNodes</a><span></span></li>
							<li><a href="#">.firstChild</a><span></span></li>
							<li><a href="#">.lastChild</a><span></span></li>
							<li><a href="#">.parentNode</a><span></span></li>
							<li><a href="#">appendChild()</a><span></span></li>
							<li><a href="#">createTextNode()</a><span></span></li>
							<li><a href="#">insertBefore</a>(key,参照节点)<span></span></li>
							<li><a href="#">repalceChild</a>(key,被替换)<span></span></li>
							<li><a href="#">cloneNode</a>(true)<span></span></li>
							<li><a href="#">removeChild()</a><span></span></li>
							<li><a href="#"></a><span></span></li>
						</ul>
						<h4>[<span>-</span>]Attribute对象</h4>
						<ul>
							<li><a href="#"></a><span></span></li>
						</ul>
					</div>
				</li>
			</ul>
			<ul>
				<li>
					<h3>JSON<span>-</span></h3>
					<div>
						<h4>[<span>-</span>]JSON</h4>
						<ul>
							<li><a href="#">JSON概念</a><span>
									概念：
									<br>它是一种表示结构化数据的形式，JSON是一个格式化的字符串，文件格式后缀为.json
									<br><br>语法：
									<br>简单值：字符串、数值、布尔值、null，不支持undefined
									<br>对象：一组无序的键值对
									<br>数组：一组有序的值的列表，可以通过索引来访问
									<br><br>JSON与JS的区别：
									<br>JSON字符串必须使用双引号（单引号会导致语法错误），且对象的属性必须加双引号
									<br>在JS中直接引入一段JSON数据应该用单引号将其括起来，因为它其实代表一个字符串
									<br>如：'{"name" : "Lee","age" : 100}'
									<br>JSON数组与对象比普通JS少了分号与赋值，其本身表示的是字符串
								</span></li>
							<li><a href="#">eval</a>('json_str')<span>
									<br>方法一：eval('json_str')
									<br>方法二：JSON对象内置方法(ECMA5)
									<br>*说明：IE7及IE7-需要引用库文件 https://github.com/douglascrockford/JSON-js/
									<br><textarea name="" id="" cols="30"
										rows="10">&lt;!--[if lte IE 7]&gt; json2.js &lt;![endif]--&gt;</textarea>
								</span></li>
							<li><a href="#">JSON.parse</a>('json_str')<span>
									解析（JSON&gt;JS）：把JSON字符串解析为原生JS值
									<br><textarea name="" id="" cols="60" rows="10">						JSON.parse('json_str',[还原函数])
						var box = '[{"name" : "a","age" : 1},{"name" : "b","age" : 2}]';
						var json = JSON.parse(box, function (key, value) {
						if (key == 'name') {
						return 'Mr. ' + value;
						} else {
						return value;
						}
						});
						alert(json[0].name);
					</textarea>
								</span></li>
							<li><a href="#">JSON.stringify</a>(js_obj)<span>
									转换（JS&gt;JSON）把JS对象序列化为JSON字符串
									<br>JSON.stringify(js_obj,[过滤函数/数组],[缩进])
									<br>过滤器与缩进为可选 ，当只保留缩进但不过滤时，将过滤器设置为null
									<br>1. 过滤器数组：指定需要的键
									<br><textarea name="" id="" cols="60" rows="10">						var box = [{name : 'a', age : 1, height : 177},{name : 'b', age : 2, height : 188}];
						var json = JSON.stringify(box, ['name', 'age'] , 4);
						alert(json);
					</textarea>
									<br>2. 过滤函数：过滤函数与还原函数都接受两个参数，即键和值，都需要返回一个值
									<br><textarea name="" id="" cols="60" rows="10">						var box = [{name : 'a', age : 1, height : 177},{name : 'b', age : 2, height : 188}];
						var json = JSON.stringify(box, function (key, value) {
						switch (key) {
						case 'name' :
						return 'Mr. ' + value;
						case 'age' :
						return value + '岁';
						default :
						return value;
						}
						}, 4);
						alert(json);
					</textarea>
									<br>3. 缩进：可以为数字（空格）或指定符号
								</span></li>
							<li><a href="#">toJSON()</a><span>
									JS对象中添加toJSON()方法，自定义过滤一些数据<br>
									<textarea name="" id="" cols="60" rows="10">						var box = [{name : 'a', age : 1, height : 177, toJSON : function () {
						return this.name;
						}},{name : 'b',age : 2, height : 188, toJSON : function () {
						return this.name;
						}}];
					</textarea>
								</span></li>
							<li><a href="#">执行优先级</a><span>
									执行优先级：toJSON() --&gt; 过滤参数 --&gt; 标准序列化 --&gt; 缩进
									<br>如在toJSON中已被过滤的键值则就算过滤参数中仍有设置也已无效
								</span></li>
							<li><a href="#"></a><span></span></li>
						</ul>
					</div>
				</li>
				<li>
					<h3>Ajax<span>+</span></h3>
					<div style="display:none">
						<!-- <h4>[<span>-</span>]类型检测</h4>
			<ul>
				<li></li>
			</ul>
			<h4>[<span>-</span>]类型转换</h4>
			<ul>
				<li></li>
			</ul> -->
					</div>
				</li>
				<li>
					<h3>参考资料<span>-</span></h3>
					<div>
						<h4>[<span>-</span>]参考资料</h4>
						<ul>
							<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript">MDN</a></li>
							<li><a href="https://stackoverflow.com/questions/tagged/javascript">StackOverflow</a></li>
							<li><a href="#"></a></li>
						</ul>
						<h4>[<span>-</span>]相关书籍</h4>
						<ul>
							<li><a href="https://www.w3cfuns.com/article-5597171-1-1.html">Javascript高级程序设计</a></li>
							<li><a href="https://www.w3cfuns.com/article-5595674-1-1.html">Javascript权威指南</a></li>
							<li><a href="#">Javascript编程精解</a></li>
						</ul>
					</div>
				</li>
			</ul>
		</div>

		<div id="HTML" class="content" style="display:none">
			<ul>
				<li>
					<h3>基础<span>-</span></h3>
					<div>
						<h4>[<span>-</span>]Common</h4>
						<ul>
							<li><a href="#">!doctype html</a><span>
									HTML5
									<br><input type="text" value="&lt;!doctype html&gt;" style="width:380px">
									<br>HTML4无框架
									<br><textarea name="" id="" cols="60"
										rows="4">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</textarea>
									<br>HTML4有框架
									<br><textarea name="" id="" cols="60"
										rows="4">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"&gt;</textarea>
								</span></li>
							<li><a href="#">html</a><span>根元素
									<br>语言 lang="zh-CN"
									<br>缓存 manifest="demo.appcache"
								</span></li>
							<li><a href="#">head</a><span>头部信息</span></li>
							<li><a href="#">body</a><span>内容区域</span></li>
							<li><a href="#">注释</a><span><input type="text" style="width:380px"
										value="&lt;!--注释--&gt;"></span></li>
						</ul>
						<h4>[<span>-</span>]Meta</h4>
						<ul>
							<li><a href="https://zhi.hu/XyIa">lang</a>
								<span>简体中文 html lang="zh-cmn-Hans"
									<br>繁体中文 html lang="zh-cmn-Hant"</span></li>
							<li><a href="#">title</a><span>标题</span></li>
							<li><a href="#">charset</a><span>
									HTML5
									<br><input type="text" style="width:380px"
										value="&lt;meta charset=&quot;utf-8&quot;&gt;">
									<br>HTML4
									<br><input type="text" style="width:380px"
										value="&lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;">
								</span></li>
							<li><a href="#">base</a>
								<span>定义页面中所有链接的默认地址或默认目标。
									<br>注释：如果使用了base标签，则必须具备 href 属性或者 target 属性或者两个属性都具备。</span></li>
							<li><a href="#">viewport</a>
								<span><input type="text" style="width:380px"
										value="&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1.0,minimal-ui&quot;/&gt;">
									<br>width viewport 宽度(数值/device-width)
									<br>height viewport 高度(数值/device-height)
									<br>initial-scale 初始缩放比例
									<br>maximum-scale 最大缩放比例
									<br>minimum-scale 最小缩放比例
									<br><a href="https://bigc.at/ios-webapp-viewport-meta.orz">user-scalable
										是否允许用户缩放(yes/no)</a>
									<br>minimal-ui 在页面加载时最小化上下状态栏(iOS7.1)
								</span></li>
							<li><a href="#">X-UA-Compatible</a><span>
									<textarea name="" id="" cols="60" rows="10">								强制使用IE最高版本及谷歌内核
								&lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
								360安全浏览器默认使用极速模式渲染
								&lt;meta name="renderer" content="webkit"&gt;
							</textarea>
									<br><a href="https://se.360.cn/v6/help/meta.html">360浏览器内核控制 Meta 标签说明文档</a></span>
							</li>
							<li><a href="#">Cache-Control</a><span>不允许百度转码
									<br>旧写法：
									<br><input type="text" style="width:380px"
										value="&lt;meta http-equiv=&quot;Cache-Control&quot; content=&quot;no-transform&quot;/&gt;">
									<br>新写法：
									<br><input type="text" style="width:380px"
										value="&lt;meta http-equiv=&quot;Cache-Control&quot; content=&quot;no-siteapp&quot;/&gt;">
									<br><a
										href="https://m.baidu.com/pub/help.php?pn=22&amp;ssid=0&amp;from=844b&amp;bd_page_type=1">参考资料</a>
								</span></li>
							<li><a href="#">name</a>(SEO)<span>
									<table border="1" cellspacing="0" cellpadding="2">
										<tbody>
											<tr>
												<td rowspan="1" colspan="1" valign="top"><strong>name</strong></td>
												<td rowspan="1" colspan="1" valign="top">
													<ul>
														<li>author</li>
														<li><strong>description</strong></li>
														<li><strong>keywords</strong></li>
														<li>generator</li>
														<li>copyright</li>
														<li>revised</li>
														<li><strong>Robots</strong></li>
													</ul>
												</td>
												<td rowspan="1" colspan="1" valign="top">content</td>
												<td rowspan="1" colspan="1" valign="top">
													<ul>
														<li>作者</li>
														<li>描述</li>
														<li>关键词</li>
														<li>创建者/程序</li>
														<li>版权信息</li>
														<li>页面的最新版本 ( &nbsp;David, 2008/8/8/ &nbsp;)</li>
														<li>all|none|index|noindex|follow|nofollow</li>
														<li>设定为all：文件将被检索，且页面上的链接可以被查询；
															<br>设定为none：文件将不被检索，且页面上的链接不可以被查询；
															<br>设定为index：文件将被检索；
															<br>设定为follow：页面上的链接可以被查询；
															<br>设定为noindex：文件将不被检索，但页面上的链接可以被查询；
															<br>设定为nofollow：文件将不被检索，页面上的链接可以被查询。
															<br><a
																href="https://msdn.microsoft.com/zh-cn/library/ff724037(v=expression.40).aspx">参考资料</a>
														</li>
													</ul>
												</td>
											</tr>
										</tbody>
									</table>
								</span></li>
							<li><a href="#">http-equiv</a><span>
									<table border="1" cellspacing="0" cellpadding="2">
										<tbody>
											<tr>
												<td rowspan="1" colspan="1" valign="top"><strong>http-equiv</strong>
												</td>
												<td rowspan="1" colspan="1" valign="top">
													<ul>
														<li>content-type</li>
														<li>content-language</li>
														<li>expires</li>
														<li><strong>pragma<br clear="none"></strong></li>
														<li>set-cookie</li>
														<li>pics-label<strong><br clear="none"></strong></li>
														<li>MSThemeCompatible</li>
													</ul>
												</td>
												<td rowspan="1" colspan="1" valign="top">&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
													&nbsp; &nbsp;content</td>
												<td rowspan="1" colspan="1" valign="top">
													<ul>
														<li>&lt;meta http-equiv="Content-Type"
															contect="text/html";charset=gb_2312-80"&gt;</li>
														<li>&lt;meta http-equiv="Content-Language" contect="zh-CN"&gt;
														</li>
														<li>&lt;meta http-equiv="Expires" contect="Mon,12 May 2001
															00:20:00 GMT"&gt; 网页到期时间</li>
														<li>&lt;meta http-equiv="Pragma" contect="no-cache"&gt;
															禁止缓存和脱机浏览</li>
														<li>&lt;meta http-equiv="set-cookie" contect="Mon,12 May 2001
															00:20:00 GMT"&gt; Cookie过期自动删除</li>
														<li>&lt;meta http-equiv="Pics-label" contect=""&gt; IE网页评级</li>
														<li>&lt;Meta http-equiv="MSThemeCompatible"
															Content="Yes"&gt;&nbsp;是否在IE中关闭 xp 的主题</li>
														<li>注意：关闭 xp 的蓝色立体按钮系统显示样式，从而和win2k 很象。</li>
													</ul>
												</td>
											</tr>
										</tbody>
									</table>
								</span></li>
							<li><a href="#">refresh</a><span>
									<input type="text" style="width:380px"
										value="&lt;meta http-equiv=&quot;Refresh&quot; contect=&quot;n;url=https://yourlink&quot;&gt;">
									<br>定时让网页在指定的时间n内，跳转到页面https://yourlink；
								</span></li>
							<li><a href="#">windows-target</a><span>
									<input type="text" style="width:380px"
										value="&lt;meta http-equiv=&quot;windows-Target&quot; contect=&quot;_top&quot;&gt;">
									<br>强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用
								</span></li>
							<li><a href="#">Page-Enter</a><span>
									<ul>
										<li><strong>&lt;meta http-equiv="Page-Enter"
												content="revealTrans(duration=5.0,transition=20)"&gt;</strong></li>
										<li><strong>Duration持续时间</strong>（单位：秒）</li>
										<li><strong>Transition滤镜类型</strong>。表示使用哪种特效，取值为0-23:</li>
									</ul>
									<table border="1" cellspacing="0" cellpadding="2">
										<tbody>
											<tr>
												<td valign="top">0&nbsp;矩形缩小</td>
												<td valign="top">1矩形扩大</td>
												<td valign="top">2 圆形缩小</td>
												<td valign="top">3 圆形扩大</td>
												<td valign="top">4 下到上刷新</td>
												<td valign="top">5 上到下刷新</td>
											</tr>
											<tr>
												<td valign="top">6 左到右刷新</td>
												<td valign="top">7 右到左刷新</td>
												<td valign="top">8 竖百叶窗</td>
												<td valign="top">9 横百叶窗</td>
												<td valign="top">10 错位横百叶窗</td>
												<td valign="top">11 错位竖百叶窗</td>
											</tr>
											<tr>
												<td valign="top">12 点扩散</td>
												<td valign="top">13 左右到中间刷新</td>
												<td valign="top">14 中间到左右刷新</td>
												<td valign="top">15 中间到上下</td>
												<td valign="top">16 上下到中间</td>
												<td valign="top">17 右下到左上</td>
											</tr>
											<tr>
												<td valign="top">18 右上到左下</td>
												<td valign="top">19 左上到右下</td>
												<td valign="top">20 左下到右上</td>
												<td valign="top">21 横条</td>
												<td valign="top">22 竖条</td>
												<td valign="top">23 以上22种随机选择一种</td>
											</tr>
										</tbody>
									</table>
								</span></li>
						</ul>
						<h4>[<span>-</span>]Link</h4>
						<ul>
							<li><a href="#">dns-prefetch</a><span>提前域名解析<input type="text" style="width:380px"
										value="&lt;link rel=&quot;dns-prefetch&quot; href="
										www.domain1.com?'="">'/&gt;</span></li>
							<li><a href="#">style</a><span>可配合条件注释或指定media媒体查询引入样式表<br>
									<input type="text" style="width:380px"
										value="&lt;link rel=&quot;stylesheet&quot; href=" "="" media="
										screen">'/&gt;</span></li>
							<li><a href="https://github.com/audreyr/favicon-cheat-sheet">favicon</a>
								<span>小ICON图标<input type="text" style="width:380px"
										value="&lt;link rel=&quot;shortcut icon&quot; type=&quot;image/x-icon&quot; href="
										img="" favicon.ico?'="">'/&gt;</span></li>
							<li><a href="#">RSS订阅</a><span>RSS订阅input
									<br><input type="text" style="width:380px"
										value="&lt;link rel=&quot;alternate&quot; type=&quot;application/rss+xml&quot; title=&quot;RSS&quot; href="
										rss.xml?'="">'/&gt;
								</span></li>
						</ul>
						<h4>[<span>-</span>]Script</h4>
						<ul>
							<li><a href="#">script</a><span>也可以写在body区域或底部,推荐放在底部加载<br>
									<input type="text" style="width:380px" value="&lt;script src=" http:=""
										libs.baidu.com="" jquery="" 1.10.2="" jquery.min.js?'="">'/&gt;<br>
									defer延迟执行，async异步加载不影响其他加载【但不要含文档修改】
								</span></li>
							<li><a href="#">noscript</a><span>禁用脚本提示</span></li>
							<li><a href="#">IE9-支持HTML5</a>
								<span><textarea name="" id="" cols="60" rows="10">&lt;!--[if lt IE 9]&gt;
								&lt;script src='https://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js?'&gt;&lt;/script&gt;
								&lt;![endif]--&gt;
								</textarea></span></li>
							<li><a href="#">IE9-支持媒体查询</a>
								<span><textarea name="" id="" cols="60" rows="10">&lt;!--[if lt IE 9]&gt;
								&lt;script src='https://apps.bdimg.com/libs/respond.js/1.4.2/respond.js?'&gt;&lt;/script&gt;
								&lt;![endif]--&gt;
								</textarea></span></li>
							<li><a href="https://modernizr.com/">modernizr</a></li>
							<li><a href="https://selectivizr.com/">IE9-支持CSS3选择器</a></li>
						</ul>
						<h4>[<span>-</span>]Win8/WinPhone</h4>
						<ul>
							<li><a href="#">msapplication-TileColor</a><span>
									Windows 8 磁贴颜色<br>
									<textarea name="" id="" cols="60" rows="10">								&lt;meta name="msapplication-TileColor" content="#000"&gt;
							</textarea></span></li>
							<li><a href="#">msapplication-TileImage</a><span>
									Windows 8 磁贴图标<br>
									<textarea name="" id="" cols="60" rows="10">								&lt;meta name="msapplication-TileImage" content="icon.png" &lt;="" textarea=""&gt;
						</textarea></span></li>
							<li><a href="#">msapplication-tap-highlight</a><span>
									windows phone 点击无高光<br>
									<textarea name="" id="" cols="60" rows="10">								&lt;meta name="msapplication-tap-highlight" content="no"&gt;
							</textarea>
								</span></li>
							<li><a href="https://blog.csdn.net/freshlover/article/details/25322839">window8</a></li>
						</ul>
						<h4>[<span>-</span>]iOS</h4>
						<ul>
							<li><a href="#">apple-mobile-web-app-capable</a><span>
									启用 WebApp 全屏模式<br>
									<textarea name="" id="" cols="60" rows="12">								&lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
							</textarea>
								</span></li>
							<li><a href="#">format-detection</a><span>
									禁止识别电话号码/邮件<br>
									<textarea name="" id="" cols="60" rows="12">								&lt;meta name="format-detection" content="telphone=no, email=no"&gt;
							</textarea>
								</span></li>
							<li><a href="#">apple-mobile-web-app-title</a><span>
									添加到主屏后的标题（iOS 6 新增）<br>
									<textarea name="" id="" cols="60" rows="12">								&lt;meta name="apple-mobile-web-app-title" content="标题"&gt;
							</textarea>
								</span></li>
							<li><a href="#">apple-touch-icon-precomposed</a><span>
									iOS图标,rel 参数：
									<br>apple-touch-icon 图片自动处理成圆角和高光等效果。
									<br>apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。
									<br>iPhone 和 iTouch，默认 57x57 像素，必须有.
									<br><textarea name="" id="" cols="60" rows="20">								默认 57x57 像素，必须有
								&lt;link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png?"&gt; 
								iPad，72x72 像素，可以没有，但推荐有
								&lt;link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png?"&gt; 
								Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有
								&lt;link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png?"&gt;
								Retina iPad，144x144 像素，可以没有，但推荐有
								&lt;link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png?"&gt; 
								IOS 图标大小在iPhone 6 plus上是180×180，iPhone 6 是120x120。 适配iPhone 6 plus，则需要在中加上这段
								&lt;link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png?"&gt;
							</textarea>
								</span></li>
							<li><a href="#">apple-touch-startup-image</a><span>
									iOS 启动画面,<a
										href="https://developer.apple.com/library/ios/qa/qa1686/_index.html">官方文档</a>
									<br>
									iPad 的启动画面是不包括状态栏区域的。<br>
									<textarea name="" id="" cols="60" rows="20">								iPad 竖屏 768 x 1004（标准分辨率）
								&lt;link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png?"&gt; 
								iPad 竖屏 1536x2008（Retina）
								&lt;link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png?"&gt; 
								iPad 横屏 1024x748（标准分辨率）
								&lt;link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png?"&gt; 
								iPad 横屏 2048x1496（Retina）
								&lt;link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png?"&gt;
							</textarea>
									iPhone 和 iPod touch 的启动画面是包含状态栏区域的。<br>
									<textarea name="" id="" cols="60" rows="20">								iPhone/iPod Touch 竖屏 320x480 (标准分辨率)
								&lt;link rel="apple-touch-startup-image" href="/splash-screen-320x480.png?"&gt; 
								iPhone/iPod Touch 竖屏 640x960 (Retina)
								&lt;link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png?"&gt; 
								iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)
								&lt;link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png?"&gt; 
								添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
								&lt;meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"&gt;
								iPhone 6对应的图片大小是750×1294，iPhone 6 Plus 对应的是1242×2148 。
								&lt;link rel="apple-touch-startup-image" href="launch6.png?" media="(device-width: 375px)"&gt;
								&lt;link rel="apple-touch-startup-image" href="launch6plus.png?" media="(device-width: 414px)"&gt;
							</textarea>
								</span></li>
							<li><a href="https://www.uisdc.com/ios8-ten-new-feature">iOS8</a></li>
						</ul>
						<h4>[<span>-</span>]Mobile</h4>
						<ul>
							<li><a href="#">UC</a><span>
									<textarea name="" id="" cols="60" rows="12">								UC强制竖屏
								&lt;meta name="screen-orientation" content="portrait"&gt;
								UC强制全屏
								&lt;meta name="full-screen" content="yes"&gt;
								UC应用模式
								&lt;meta name="browsermode" content="application"&gt;
							</textarea>
								</span></li>
							<li><a href="#">QQ</a><span>
									<textarea name="" id="" cols="60" rows="12">								QQ强制竖屏
								&lt;meta name="x5-orientation" content="portrait"&gt;
								QQ强制全屏
								&lt;meta name="x5-fullscreen" content="true"&gt;
								QQ应用模式
								&lt;meta name="x5-page-mode" content="app"&gt;
							</textarea>
								</span></li>
							<li><a href="https://code.lancepollard.com/complete-list-of-html-meta-tags/">other</a></li>
						</ul>
					</div>
				</li>
			</ul>
			<ul>
				<li>
					<h3>内容<span>-</span></h3>
					<div>
						<h4>[<span>-</span>]内容</h4>
						<ul>

							<li><a href="#">address</a><span>定义文档作者或拥有者的联系信息。</span></li>
							<li><a href="#">cite</a><span>定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题。</span></li>
							<li><a href="#">header</a><span>定义一个文档头部部分</span></li>
							<li><a href="#">footer</a><span>定义一个文档底部</span></li>
							<li><a href="#">nav</a><span>定义导航链接</span></li>
							<li><a href="#">section</a><span>定义了文档的某个区域</span></li>
							<li><a href="#">article</a><span>定义一个文章内容</span></li>
							<li><a href="#">aside</a><span>定义其所处内容之外的内容。</span></li>
							<li><a href="#">details</a><span>定义了用户可见的或者隐藏的需求的补充细节。</span></li>
							<li><a href="#">summary</a><span>定义一个可见的标题。 当用户点击标题时会显示出详细信息。</span></li>
						</ul>
						<h4>[<span>+</span>]布局</h4>
						<ul style="display:none">
							<li><a href="#">div</a><span>层</span></li>
							<li><a href="#">span</a><span>文本</span></li>
							<li><a href="#">h1~h6</a><span>标题</span></li>
							<li><a href="#">p</a><span>段落</span></li>
							<li><a href="#">br</a><span>换行,title中换行&amp; #10;</span></li>
							<li><a href="#">hr</a><span>水平线</span></li>
							<li><a href="#">a</a><span>链接</span></li>
							<li><a href="#">iframe</a><span>内联框架src=url, <a
										href="https://www.w3cschool.cc/tags/tag-iframe.html">沙盒过滤</a></span></li>
						</ul>
						<h4>[<span>+</span>]格式</h4>
						<ul style="display:none">
							<li><a href="#">b</a><span>粗体</span></li>
							<li><a href="#">i</a><span>定义斜体文本。</span></li>
							<li><a href="#">del</a><span>定义被删除文本。</span></li>
							<li><a href="#">em</a><span>定义强调文本。 </span></li>
							<li><a href="#">strong</a><span>定义语气更为强烈的强调文本。</span></li>
							<li><a href="#">mark</a><span>标签定义带有记号的文本。</span></li>
							<li><a href="#">sub</a><span>定义下标文本。</span></li>
							<li><a href="#">sup</a><span>定义上标文本。</span></li>
							<li><a href="#">bdo</a><span>定义文本的方向。bdo dir=ltr/rtl</span></li>
							<li><a href="#">abbr</a><span>定义一个缩写。</span></li>
							<li><a href="#">blockquote</a><span>定义块引用。</span></li>
							<li><a href="#">q</a><span>定义短的引用。浏览器经常会在这种引用的周围插入引号。</span></li>
							<li><a href="#">meter</a><span>定义度量衡。仅用于已知最大和最小值的度量。</span></li>
							<li><a href="#">progress</a><span>定义运行中的任务进度（进程）。</span></li>
						</ul>
						<h4>[<span>-</span>]列表</h4>
						<ul>
							<li><a href="#">ul</a><span>定义一个无序列表</span></li>
							<li><a href="#">ol</a><span>定义一个有序列表</span></li>
							<li><a href="#">li</a><span>定义一个列表项</span></li>
							<li><a href="#">dl/dt/dd</a><span>自定义列表</span></li>
						</ul>
						<h4>[<span>-</span>]表格</h4>
						<ul>
							<li><a href="#">table</a><span>表格</span></li>
							<li><a href="#">caption</a><span>表格标题</span></li>
							<li><a href="#">th</a><span>表头单元格</span></li>
							<li><a href="#">tr</a><span>行</span></li>
							<li><a href="#">td</a><span>单元格</span></li>
							<li><a href="#">thead</a><span>表头</span></li>
							<li><a href="#">tbody</a><span>主体</span></li>
							<li><a href="#">tfoot</a><span>表尾</span></li>
							<li><a href="#">col</a><span>定义表格中一个或多个列的属性值。</span></li>
							<li><a href="#">colgroup</a><span>定义表格中供格式化的列组。<a
										href="https://www.w3cschool.cc/try/try.php?filename=tryhtml_col_test">参考实例</a></span>
							</li>
						</ul>
						<h4>[<span>-</span>]表单</h4>
						<ul>
							<li><a href="#">form</a><span>表单
									<table border="1" cellspacing="0" cellpadding="2">
										<tbody>
											<tr>
												<td rowspan="1" colspan="1" valign="top">
													<div><strong>form</strong></div>
													<ul>
														<li><strong>action="url"</strong></li>
														<li><strong>autocomplete="on/off"</strong></li>
														<li><strong>method="get/post"</strong></li>
														<li><strong>name=""</strong></li>
														<li><strong>target="_blank"</strong></li>
														<li><strong>novalidate(="novalidate")</strong></li>
													</ul>
												</td>
												<td rowspan="1" colspan="1" valign="top">
													<div></div>
													<ul>
														<li>规定当提交表单时向何处发送表单数据。</li>
														<li>规定是否启用表单的自动完成功能。（HTML5）</li>
														<li>规定用于发送表单数据的 HTTP 方法。</li>
														<li>表单名</li>
														<li>action打开方式</li>
														<li>无需验证（HTML5、safari!x）</li>
													</ul>
												</td>
											</tr>
											<tr>
												<td rowspan="1" colspan="1" valign="top">
													<ul>
														<li><strong>enctype=""</strong></li>
													</ul>
													<div>限POST方法</div>
													<div>规定在向服务器发送表单数据之前如何对其进行编码。</div>
												</td>
												<td rowspan="1" colspan="1" valign="top">
													<div>application/x-www-form-urlencoded</div>
													<div>&nbsp;&nbsp;&nbsp;&nbsp; 默认。在发送前对所有字符进行编码（将空格转换为 "+" 符号，特殊字符转换为
														ASCII HEX 值）。<br clear="none"> multipart/form-data</div>
													<div>&nbsp;&nbsp;&nbsp;&nbsp; 不对字符编码。当使用有文件上传控件的表单时，该值是必需的。<br
															clear="none"> text/plain</div>
													<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;将空格转换为 "+" 符号，但不编码特殊字符。</div>
												</td>
											</tr>
										</tbody>
									</table></span></li>
							<li><a href="#">label</a><span>定义 input 元素的标注。</span></li>
							<li><a href="#">input</a><span>定义一个输入控件。语音搜索<textarea name="" id="" cols="60"
										rows="2"></textarea><input type="text" x-webkit-speech="">
									<br>
									<table>
										<tbody>
											<tr>
												<td rowspan="1" colspan="1"><strong>button</strong></td>
												<td rowspan="1" colspan="1">定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。</td>
											</tr>
											<tr>
												<td rowspan="1" colspan="1"><strong>checkbox</strong></td>
												<td rowspan="1" colspan="1">定义复选框。</td>
											</tr>
											<tr>
												<td rowspan="1" colspan="1">color</td>
												<td rowspan="1" colspan="1">定义拾色器。</td>
											</tr>
											<tr>
												<td rowspan="1" colspan="1">date</td>
												<td rowspan="1" colspan="1">定义 date 控件（包括年、月、日，不包括时间）。</td>
											</tr>
											<tr>
												<td rowspan="1" colspan="1">datetime</td>
												<td rowspan="1" colspan="1">定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC
													时区）。</td>
											</tr>
											<tr>
												<td rowspan="1" colspan="1">datetime-local</td>
												<td rowspan="1" colspan="1">定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。
												</td>
											</tr>
											<tr>
												<td rowspan="1" colspan="1">emailNew</td>
												<td rowspan="1" colspan="1">定义用于 e-mail 地址的字段。</td>
											</tr>
											<tr>
												<td rowspan="1" colspan="1"><strong>file</strong></td>
												<td rowspan="1" colspan="1">定义文件选择字段和 "浏览..." 按钮，供文件上传。</td>
											</tr>
											<tr>
												<td rowspan="1" colspan="1"><strong>hidden</strong></td>
												<td rowspan="1" colspan="1">定义隐藏输入字段。</td>
											</tr>
											<tr>
												<td rowspan="1" colspan="1">image</td>
												<td rowspan="1" colspan="1">定义图像作为提交按钮。</td>
											</tr>
											<tr>
												<td rowspan="1" colspan="1">month</td>
												<td rowspan="1" colspan="1">定义 month 和 year 控件（不带时区）。</td>
											</tr>
											<tr>
												<td rowspan="1" colspan="1"><strong>number</strong></td>
												<td rowspan="1" colspan="1">定义用于输入数字的字段。</td>
											</tr>
											<tr>
												<td rowspan="1" colspan="1">password</td>
												<td rowspan="1" colspan="1">定义密码字段（字段中的字符会被遮蔽）。</td>
											</tr>
											<tr>
												<td rowspan="1" colspan="1"><strong>radio</strong></td>
												<td rowspan="1" colspan="1">定义单选按钮。</td>
											</tr>
											<tr>
												<td rowspan="1" colspan="1"><strong>range</strong></td>
												<td rowspan="1" colspan="1">定义用于精确值不重要的输入数字的控件（比如 slider 控件）。</td>
											</tr>
											<tr>
												<td rowspan="1" colspan="1"><strong>reset</strong></td>
												<td rowspan="1" colspan="1">定义重置按钮（重置所有的表单值为默认值）。</td>
											</tr>
											<tr>
												<td rowspan="1" colspan="1">search</td>
												<td rowspan="1" colspan="1">定义用于输入搜索字符串的文本字段。</td>
											</tr>
											<tr>
												<td rowspan="1" colspan="1"><strong>submit</strong></td>
												<td rowspan="1" colspan="1">定义提交按钮。</td>
											</tr>
											<tr>
												<td rowspan="1" colspan="1">tel</td>
												<td rowspan="1" colspan="1">定义用于输入电话号码的字段。</td>
											</tr>
											<tr>
												<td rowspan="1" colspan="1"><strong>text</strong></td>
												<td rowspan="1" colspan="1"><strong>默认</strong>。定义一个单行的文本字段（默认宽度为 20
													个字符）。</td>
											</tr>
											<tr>
												<td rowspan="1" colspan="1">time</td>
												<td rowspan="1" colspan="1">定义用于输入时间的控件（不带时区）。</td>
											</tr>
											<tr>
												<td rowspan="1" colspan="1">url</td>
												<td rowspan="1" colspan="1">定义用于输入 URL 的字段。</td>
											</tr>
											<tr>
												<td rowspan="1" colspan="1">week</td>
												<td rowspan="1" colspan="1">定义 week 和 year 控件（不带时区）。</td>
											</tr>
										</tbody>
									</table></span></li>
							<li><a href="#">datalist</a><span>规定了 input 元素可能的选项列表。</span></li>
							<li><a href="#">textarea</a><span>定义多行的文本输入控件。</span></li>
							<li><a href="#">button</a><span>定义按钮。</span></li>
							<li><a href="#">select</a><span>定义选择列表（下拉列表）。</span></li>
							<li><a href="#">optgroup</a><span>定义选择列表中相关选项的组合。</span></li>
							<li><a href="#">option</a><span>定义选择列表中的选项。</span></li>
							<li><a href="#">fieldset</a><span>定义了一组相关的表单元素，并使用外框包含起来</span></li>
							<li><a href="#">legend</a><span>定义了 <fieldset> 元素的标题</fieldset></span></li>
						</ul>
						<h4>[<span>-</span>]图像</h4>
						<ul>
							<li><a href="#">img</a><span>定义图像。</span></li>
							<li><a href="#">map/area</a><span>定义图像映射/定义图像地图内部的区域。</span></li>
							<li><a href="#">canvas</a><span>绘制图形</span></li>
							<li><a href="#">figure</a><span>figure 标签用于对元素进行组合。</span></li>
							<li><a href="#">figcaption</a><span>figure的标题</span></li>
						</ul>
						<h4>[<span>-</span>]多媒体</h4>
						<ul>
							<li><a href="#">audio</a><span>定义声音，比如音乐或其他音频流。</span></li>
							<li><a href="#">video</a><span>定义一个音频或者视频</span></li>
							<li><a href="#">source</a><span>定义media元素 (video 和 audio)的媒体资源</span></li>
							<li><a href="#">track</a><span>为媒体(video 和 audio)元素定义外部文本轨道。</span></li>
							<li><a href="#">object</a><span>定义了一个容器，用来嵌入外部应用或者互动程序（插件）。</span></li>
							<li><a href="#">embed</a><span>定义嵌入的对象。</span></li>
							<li><a href="#">param</a><span>定义对象的参数。</span></li>
						</ul>
					</div>
				</li>
			</ul>
			<ul>
				<li>
					<h3>SVG<span>-</span></h3>
					<div>
						<h4>[<span>+</span>]概念资料</h4>
						<ul style="display:none">
							<li><a href="#">插入方式</a><span>
									<a
										href="https://www.w3cplus.com/html5/svg-introduction-and-embedded-html-page.html">嵌入方式：</a>
									<br>1.img标签:<input type="text" style="width:200px" value="&lt;img src="
										demo.svg?'="" alt="">'/&gt;
									<br>2.css背景:<input type="text" style="width:200px"
										value=" background: url(&quot;https://www.w3cplus.com/sites/default/files/blogs/2014/1411/girls.svg&quot;) no-repeat center;">
									<br>3.svg标签
									<textarea name="" id="" cols="30" rows="10">								&lt;svg xml:space="preserve" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"&gt;
								&lt;/svg&gt;
							</textarea>
									<br>4.iframe标签:<input type="text" style="width:200px"
										value="&lt;iframe src=&quot;https://www.w3cplus.com/sites/default/files/blogs/2014/1411/girls.svg&quot; width=&quot;200&quot; height=&quot;200&quot; &gt;&lt;/iframe&gt;">
									<br>5.使用embed标签(早期将SVG图像嵌入到HTML页面中都是通过embed元素。当时并不是所有的浏览器都支持原生SVG。)<input
										type="text" style="width:200px"
										value="&lt;embed src=&quot;https://www.w3cplus.com/sites/default/files/blogs/2014/1411/girls.svg&quot; width=&quot;300&quot; height=&quot;220&quot; type=&quot;image/svg+xml&quot; pluginspage=&quot;https://www.adobe.com/svg/viewer/install/&quot; /&gt;">
									<br>6.使用object标签(object元素是HTML4的标准标签元素，被所有较新的流星器支持。它只不过是不允许使用脚本。)<input type="text"
										style="width:200px"
										value="&lt;object data=&quot;https://www.w3cplus.com/sites/default/files/blogs/2014/1411/girls.svg&quot; width=&quot;300&quot; height=&quot;200&quot; type=&quot;image/svg+xml&quot; codebase=&quot;https://www.adobe.com/svg/viewer/install/&quot; /&gt;">
									<br>没有单位时总是以px作为单位,即使父级设置了其他类型单位,子级未设置单位的依然按px绘制。
								</span></li>
							<li><a href="https://www.w3cschool.cc/svg/svg-reference.html">W3school参考手册</a></li>
							<li><a href="https://www.imooc.com/learn/143">视频教程</a></li>
							<li><a href="https://www.w3.org/TR/SVG11/">W3C规范</a></li>
						</ul>
						<h4>[<span>+</span>]工具素材</h4>
						<ul style="display:none">
							<li><a href="https://filterfactory.mobi/">SVG Filter生成</a></li>
							<li><a href="https://cssplant.com/clip-path-generator">Clip Path生成</a></li>
							<li><a href="https://www.flaticon.com/">Flaticon</a></li>
							<li><a href="https://icomoon.io/app/#select">Icomoon</a></li>
							<li><a href="https://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html">SVG
									Editor</a></li>
						</ul>
						<h4>[<span>-</span>]基本属性</h4>
						<ul>
							<li><a href="#">viewBox</a><span>
									viewBox="x, y, width, height" // x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度
								</span></li>
							<li><a href="#">preserveAspectRatio</a><span>
									preserveAspectRatio="xMidYMid meet" <a
										href="https://www.zhangxinxu.com/wordpress/2014/08/svg-viewport-viewbox-preserveaspectratio/">参考资料</a>
									<br>第1个值表示，viewBox如何与SVG viewport对齐，自由组合；
									<br>xMin viewport和viewBox左边对齐
									<br>xMid viewport和viewBox x轴中心对齐
									<br>xMax viewport和viewBox右边对齐
									<br>YMin viewport和viewBox上边缘对齐。注意Y是大写。
									<br>YMid viewport和viewBox y轴中心点对齐。注意Y是大写。
									<br>YMax viewport和viewBox下边缘对齐。注意Y是大写。
									<br>第2个值表示，如何维持高宽比（如果有）。
									<br>meet 保持纵横比缩放viewBox适应viewport
									<br>slice 保持纵横比同时比例小的方向放大填满viewport
									<br>none 扭曲纵横比以充分适应viewport
								</span></li>
							<li><a href="#">g</a><span>编组</span></li>
							<li><a href="#">defs</a><span>引用的元素容器</span></li>
							<li><a href="#">pattern</a><span>定义一个可用于平铺的图案,fill:url(#id)</span></li>
							<li><a href="#">use</a><span>svg画布铺满整个浏览器,需要设置html+body~font-size:0;line-height:0;<br>
									use xlink:href="#id"</span></li>
							<li><a href="#">clipPath</a><span>clipPath定义一个用于剪裁的形状,clip-path="url(#id)"通过引用对某个图像进行剪裁
									<br><b>单词！！【定义】clipPath 《=》 【引用】clip-path="url(#id)"</b>
									<br><b>被剪裁形状内的区间为显示区间！！</b>
									<br>css制作遮罩动画中,遮罩图形的尺寸不可操作,只有transform属性
								</span></li>
							<li><a href="#">mask</a><span>蒙版
									<br>maskUnits="'userSpaceOnUse' or
									'objectBoundingBox'.设定裁剪面是否是相对完整的视窗或对象（默认：'objectBoundingBox'）"
									<br>maskContentUnits="第二个掩码相对对象的图形位置使用百分比'userSpaceOnUse'或'objectBoundingBox'（默认：'userSpaceOnUse'）"
									<br>x="裁剪面掩码（默认值：-10％）"
									<br>y="裁剪面掩码（默认值：-10％）"
									<br>width="裁剪面掩码（默认是：120％）"
									<br>height="裁剪面掩码（默认是：120％）"</span></li>
							<li><a href="#">image</a><span>
									定义图像
									<br>x="图像的左上角的x轴坐标"
									<br>y="图像的左上角的y轴坐标"
									<br>width="图像的宽度". 必须.
									<br>height="图像的高度". 必须.
									<br>xlink:href="图像的路径". 必须.
								</span></li>
						</ul>
						<h4>[<span>-</span>]绘制图形</h4>
						<ul>
							<li><a href="#">rect</a><span>矩形 x,y,width,height,rx,ry</span></li>
							<li><a href="#">circle</a><span>圆形 cx,cy,r</span></li>
							<li><a href="#">ellipse</a><span>椭圆 cx,cy,rx,ry</span></li>
							<li><a href="#">line</a><span>直线 x1,y1,x2,y2</span></li>
							<li><a href="#">polygon</a><span>多边形 points="x1,y1 x2,y2 ...,xN,yN"</span></li>
							<li><a href="#">polyline</a><span>折线 points="x1,y1 x2,y2 ...,xN,yN"</span></li>
							<li><a href="#">path</a><span>路径 d=". . ."</span></li>
							<li><a href="#">text</a><span>文字 x,y</span></li>
						</ul>
						<h4>[<span>-</span>]图形属性</h4>
						<ul>
							<li><a href="#">width/height</a><span>宽高</span></li>
							<li><a href="#">x/y</a><span>矩形/文字起始点水平/垂直坐标</span></li>
							<li><a href="#">rx/ry</a><span>
									矩形水平圆角 / 椭圆水平半径
									<br>矩形垂直圆角 / 椭圆垂直半径
								</span></li>
							<li><a href="#">cx/cy</a><span>圆心水平/垂直坐标</span></li>
							<li><a href="#">r</a><span>圆半径</span></li>
							<li><a href="#">x1,y1,x2,y2</a><span>线条的起始与结束坐标点</span></li>
							<li><a href="#">points</a><span>定义多边形/折线每个角的x和y坐标,每一组数x,y xn,yn每一组点之间用空格分开</span></li>
							<li><a href="#">d</a><span>定义路径数据：
									<br>所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
									<br>M = moveto （移动到）
									<br>L = lineto （连线）
									<br>H = horizontal lineto （水平连线）
									<br>V = vertical lineto （垂直连线）
									<br>C = curveto （曲线）
									<br>S = smooth curveto （平滑曲线）
									<br>Q = quadratic Bézier curve （二次贝塞尔曲线）
									<br>=》M x0 y0 q x1 y1 x2 y2 小写代表相对,即后面的值表示正数+水平向下/负数-水平向上
									<br>T = smooth quadratic Bézier curveto （平滑贝塞尔曲线）
									<br>A = elliptical Arc （椭圆弧形）
									<br>Z = closepath （闭合路径）
								</span></li>
							<li><a href="#">style</a><span>CSS样式</span></li>
						</ul>
						<h4>[<span>-</span>]样式属性</h4>
						<ul>
							<li><a href="#">fill</a>(#fff)<span>填充颜色</span></li>
							<li><a href="#">fill-opacity</a>(0-1)<span>填充透明度</span></li>
							<li><a href="#">stroke</a>(#f39)<span>轮廓颜色</span></li>
							<li><a href="#">stroke-opacity</a>(0-1)<span>轮廓线透明度</span></li>
							<li><a href="#">stroke-width</a>(8)<span>轮廓宽度(可不要单位)</span></li>
							<li><a href="#">stroke-linecap</a>(round)<span>轮廓笔触样式
									<br>butt:结尾柄
									<br>round:圆
									<br>square:方
								</span></li>
							<li><a href="#">stroke-dasharray</a><span>虚线样式
									<br>自定义虚线的结构
									<br>stroke-dasharray="5,5"
									<br>stroke-dasharray="20,10,5,5,5,10"
									<br>SVG描边动画,设置stroke-dasharray: 1000;stroke-dashoffset: 1000;设置keyframe{
									to{stroke-dashoffset: 0;}}
								</span></li>
							<li><a href="#">transform</a><span>变换是基于自身坐标系！矩阵等同线性代数矩阵</span></li>
						</ul>
						<h4>[<span>-</span>]字体</h4>
						<ul>
							<li><a href="#">text</a><span>文字，基于基线对齐</span></li>
							<li><a href="#">textPath</a><span>
									路径文字 textPath xlink:href="#id"
									<br>超出路径的部分不会被渲染
									<br>位移控制：
									<br>水平：x(起始位置点),text-anchor:start/end/middle(文字的哪个点对齐文本x起始点),startOffset:%(文本以哪个开始作为与路径对齐的点),dx(切线起点)
									<br>垂直：y(无),dy(法线位置,dx/dy会对后续字符一起影响)
									<textarea name="" id="" cols="30" rows="10">								&lt;svg xmlns="https://www.w3.org/2000/svg" version="1.1" xmlns:xlink="https://www.w3.org/1999/xlink"&gt;
								  &lt;defs&gt;
								    &lt;path id="path1" d="M75,20 a1,1 0 0,0 100,0"&gt;&lt;/path&gt;
								  &lt;/defs&gt;
								  &lt;text x="10" y="100" style="fill:red;"&gt;
								    &lt;textpath xlink:href="#path1"&gt;I love SVG I love SVG&lt;/textpath&gt;
								  &lt;/text&gt;
								&lt;/svg&gt;
							</textarea>
								</span></li>
							<li><a href="#">tspan</a><span>text中多行文本,可拥有单独样式</span></li>
							<li><a href="#">a</a>xlink:href<span>
									a标签可以添加到任意图形上<br>
									链接文本,应包围在text外面,xlink:title提示<br>
									<textarea name="" id="" cols="30" rows="10">								&lt;a xlink:href="https://www.w3schools.com/svg/" target="_blank"&gt;
								    &lt;text x="0" y="15" fill="red"&gt;I love SVG&lt;/text&gt;
								&lt;/a&gt;
							</textarea>
								</span></li>
						</ul>
						<h4>[<span>-</span>]渐变</h4>
						<ul>
							<li><a href="#">linearGradient</a><span>线性渐变
									<br>id="id 属性可为渐变定义一个唯一的名称。引用必须"
									<br>gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'.使用视图框或对象，以确定相对位置矢量点。
									（默认为'objectBoundingBox）"
									<br>gradientTransform="适用于渐变的转变"
									<br>x1="渐变向量x启动点（默认0％）"
									<br>y1="渐变向量y启动点（默认0％）"
									<br>x2="渐变向量x的终点。 （默认100％）"
									<br>y2="渐变向量y的终点。 （默认0％）"
									<br>spreadMethod="'pad' or 'reflect' or 'repeat'"
									<br>xlink:href="reference to another gradient whose attribute values are used as
									defaults and stops included. Recursive"
									<textarea name="" id="" cols="30" rows="10">								&lt;svg xmlns="https://www.w3.org/2000/svg" version="1.1"&gt;
								  &lt;defs&gt;
								    &lt;lineargradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"&gt;
								      &lt;stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"&gt;
								      &lt;stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"&gt;
								    &lt;/stop&gt;&lt;/stop&gt;&lt;/lineargradient&gt;
								  &lt;/defs&gt;
								  &lt;ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)"&gt;&lt;/ellipse&gt;
								&lt;/svg&gt;
							</textarea>
								</span></li>
							<li><a href="#">radialGradient</a><span>径向渐变
									<br>gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'. 使用视图框或对象以确定相对位置的矢量点。
									（默认为'objectBoundingBox）"
									<br>gradientTransform="适用于渐变的变换"
									<br>cx="渐变的中心点（数字或％ - 50％是默认）"
									<br>cy="渐变的中心点。 （默认50％）"
									<br>r="渐变的半径。 （默认50％）"
									<br>fx="渐变的焦点。 （默认0％）"
									<br>fy="渐变的焦点。 （默认0％）"
									<br>spreadMethod="'pad' or 'reflect' or 'repeat'"
									<br>xlink:href="引用到另一个渐变，其属性值作为默认值。递归"
									<textarea name="" id="" cols="30" rows="10">								&lt;svg xmlns="https://www.w3.org/2000/svg" version="1.1"&gt;
								  &lt;defs&gt;
								    &lt;radialgradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"&gt;
								      &lt;stop offset="0%" style="stop-color:rgb(255,255,255);
								      stop-opacity:0"&gt;
								      &lt;stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"&gt;
								    &lt;/stop&gt;&lt;/stop&gt;&lt;/radialgradient&gt;
								  &lt;/defs&gt;
								  &lt;ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)"&gt;&lt;/ellipse&gt;
								&lt;/svg&gt;
							</textarea>
								</span></li>
						</ul>
						<h4>[<span>+</span>]滤镜</h4>
						<ul style="display:none">
							<li><a href="#">filter</a><span>滤镜<br>
									所有互联网的SVG滤镜定义在defs元素中。defs元素定义短并含有特殊元素（如滤镜）定义。
									filter标签用来定义SVG滤镜。filter标签使用必需的id属性来定义向图形应用哪个滤镜
								</span></li>
							<li><a href="#">示例</a><span>
									<textarea name="" id="" cols="30" rows="10">								&lt;svg xmlns="https://www.w3.org/2000/svg" version="1.1"&gt;
								  &lt;defs&gt;
								    &lt;filter id="f1" x="0" y="0"&gt;
								      &lt;fegaussianblur in="SourceGraphic" stddeviation="15"&gt;
								    &lt;/fegaussianblur&gt;&lt;/filter&gt;
								  &lt;/defs&gt;
								  &lt;rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)"&gt;&lt;/rect&gt;
								&lt;/svg&gt;
							</textarea>
									<br>filter元素id属性定义一个滤镜的唯一名称
									<br>feGaussianBlur元素定义模糊效果
									<br>in="SourceGraphic"这个部分定义了由整个图像创建效果
									<br>stdDeviation属性定义模糊量
									<br>rect元素的滤镜属性用来把元素链接到"f1"滤镜
								</span></li>
							<li><a href="#">feBlend</a><span>与图像相结合的滤镜</span></li>
							<li><a href="#">feOffset</a><span>过滤阴影</span></li>
							<li><a href="#">feGaussianBlur</a>高斯模糊<span></span></li>
							<li><a href="#">feColorMatrix</a><span>用于彩色滤光片转换</span></li>
							<li><a href="#">feComponentTransfer</a><span></span></li>
							<li><a href="#">feComposite</a><span></span></li>
							<li><a href="#">feConvolveMatrix</a><span></span></li>
							<li><a href="#">feDiffuseLighting</a><span></span></li>
							<li><a href="#">feDisplacementMap</a><span></span></li>
							<li><a href="#">feFlood</a><span></span></li>
							<li><a href="#">feImage</a><span></span></li>
							<li><a href="#">feMerge</a><span></span></li>
							<li><a href="#">feMorphology</a><span></span></li>
							<li><a href="#">feSpecularLighting</a><span>feTile</span></li>
							<li><a href="#">feTurbulence</a><span></span></li>
							<li><a href="#">feDistantLight</a><span>用于照明过滤</span></li>
							<li><a href="#">fePointLight</a><span>用于照明过滤</span></li>
							<li><a href="#">feSpotLight</a><span>用于照明过滤</span></li>
						</ul>
						<h4>[<span>-</span>]动画</h4>
						<ul>
							<li><a href="#">参数详解</a><span><a
										href="https://www.zhangxinxu.com/wordpress/2014/08/so-powerful-svg-smil-animation/">参考资料</a>
									<br>attributeName : 可以是元素直接暴露的属性，可以是CSS属性
									<br>attributeType : CSS/XML/auto
									<br>from = 动画的起始值。
									<br>to = 指定动画的结束值,如果to,by同时出现，则by打酱油，只识别to.
									<br>by = 动画的相对变化值。
									<br>values = "a,b,c,d"用分号分隔的一个或多个值，可以看出是动画的多个关键值点。
									<br>begin = "3s;6s" 动画开始的时间。begin的定义是分号分隔的一组值；
									<br> 相对时间：-3s；
									<br> 关联其他：id.end/begin +/-3s；
									<br> 绑定事件：id.click +/-3s；
									<br> 重复次数：id.repeat(整数) +/-3s；
									<br> 某个按键：accessKey(" character ")
									<br> 无线等待：indefinite 需要beginElement()方法触发或者指向该动画元素的超链接(SVG中的a元素)
									<br>dur = "3s" 动画执行的时间
									<br>calcMode = discrete离散，from值直接跳到to值。
									<br> linear线性，动画从头到尾的速率都是一致的
									<br> paced踏步，通过插值让动画的变化步调平稳均匀
									<br> spline样条，插值定义贝塞尔曲线
									<br>repeatCount:表示动画执行次数,合法数值或者indefinite
									<br>repeatDur:定义重复动画的总时间,可以是普通时间值或者indefinite
									<br>fill:freeze元素保持了动画结束之后的状态 | remove表示动画结束直接回到开始的地方
									<br>accumulate:是累积的意思。支持参数有：none | sum. 默认值是none. 如果值是sum表示动画结束时候的位置作为下次动画的起始位置。
									<br>additive:控制动画是否附加。支持参数有：replace | sum. 默认值是replace.
									如果值是sum表示动画的基础知识会附加到其他低优先级的动画上
									<br>restart:always | whenNotActive |
									never.always是默认值，表示总是，也就是点一次圈圈，马儿跑一下。whenNotActive表示动画正在进行的时候，是不能重启动画的。never表示动画是一波流。
								</span></li>
							<li><a href="#">set</a><span>
									<a
										href="https://www.zhangxinxu.com/wordpress/2014/08/so-powerful-svg-smil-animation/">参考资料</a>
									<textarea name="" id="" cols="30" rows="10">								&lt;set attributename="x" attributetype="XML" to="60" begin="3s"&gt;
							&lt;/set&gt;</textarea>
								</span></li>
							<li><a href="#">animate</a><span>随时间动态改变属性
									<br>attributeName="目标属性名称"
									<br>from="起始值"
									<br>to="结束值"
									<br>dur="持续时间"
									<br>repeatCount="动画时间将发生"</span></li>
							<li><a href="#">animateColor</a><span>定义随着时间的推移颜色转换
									<br>by="相对偏移值"
									<br>from="起始值"
									<br>to="结束值"</span></li>
							<li><a href="#">animateMotion</a><span>使元素沿着动作路径移动
									<br>calcMode="动画的插补模式。可以是'discrete', 'linear', 'paced', 'spline'"
									<br>path="运动路径"
									<br>keyPoints="沿运动路径的对象目前时间应移动多远"
									<br>rotate="应用旋转变换"
									<br>xlink:href="一个URI引用<path></path>元素，它定义运动路径"</span></li>
							<li><a href="#">animateTransform</a><span>动画上一个目标元素变换属性，从而使动画控制平移，缩放，旋转或倾斜
									<br>by="相对偏移值"
									<br>from="起始值"
									<br>to="结束值"
									<br>type="类型的转换其值是随时间变化。可以是 'translate', 'scale', 'rotate', 'skewX', 'skewY'"</span>
							</li>
						</ul>
						<h4>[<span>-</span>]Javascript API</h4>
						<ul>
							<li><a href="#">创建图形</a><span>document.creatElementNS(ns,tagName)</span></li>
							<li><a href="#">SVG_NS</a><span>'https://www.w3.org/2000/svg'</span></li>
							<li><a href="#">XLINK_NS</a><span>'https://www.w3.org/1999/xlink'</span></li>
							<li><a href="#">Morpheus</a><span> 平滑复杂动画的补间动画创建
									<a href="https://github.com/alexk111/SVG-Morpheus">Git</a> |
									<a href="https://www.zhangxinxu.com/wordpress/?p=4480">参考资料</a>
									<br>用法：
									<br>1.引入库,创建SVG,给SVG画布定义id,内部元素必须为g分组,不支持symbol,同样给定id
									<br>2.实例化SVG为对象，此处为整个svg画布。var myIcons = new SVGMorpheus('#icon');不设置参数时默认显示最后一个g。
									<br>3.切换目标，注意此处引入的id不再加“#”号！myIcons.to('icon-pacman');结合事件切换
									<hr>SVGMorpheus构造方法
									<br>var myIcons = new SVGMorpheus(element, options, callback);
									<br>1.element
									<br>SVG元素，可以是选择器（字符串）、也可以直接就是SVG元素、Object元素或IFrame元素（对象）。
									<br>2.options
									<br>可选参数们。具体见下：
									<br>options.iconId – 可选。表示初始化之后，默认显示的图标id, 如果不使用默认值，则使用最后一个图标。
									<br>options.duration – 可选。动画持续时间，单位是毫秒。默认是750ms.
									<br>options.easing – 可选。设置默认缓动类型（缓动关键字后面有陈列）。默认是：quad-in-out.
									<br>options.rotation – 可选。设置动画旋转方向，顺时针还是逆时针，支持下面4个关键字clock, counterclock,
									random以及none, 分别表示顺时针，逆时针，随机时针以及没有旋转。默认值是clock也就是顺时针变旋转变补间。
									<br>3.callback
									可选。设置所有图标变换动画结束后的回调。
									<hr>SVGMorpheus.to()方法
									<br>myIcons.to(iconId, options, callback);
									<br>1.iconId
									<br>要变换的图标的id, 在<g>元素上。【不需要#】
										<br>2.options
										<br>可选参数们。具体见下：
										<br>options.iconId – 可选。表示初始化之后，默认显示的图标id, 如果不使用默认值，则使用最后一个图标。
										<br>options.duration – 可选。当前动画持续时间，单位是毫秒。默认是750ms.
										<br>options.easing – 可选。设置当前动画缓动类型（缓动关键字后面有陈列）。默认是：quad-in-out.
										<br>circ-in, circ-out, circ-in-out, cubic-in, cubic-out, cubic-in-out,
										elastic-in, elastic-out, elastic-in-out, expo-in, expo-out, expo-in-out, linear,
										quad-in, quad-out, quad-in-out, quart-in, quart-out, quart-in-out, quint-in,
										quint-out, quint-in-out, sine-in, sine-out, sine-in-out
										<br>options.rotation – 可选。设置当前动画旋转方向，顺时针还是逆时针，支持下面4个关键字clock, counterclock,
										random以及none, 分别表示顺时针，逆时针，随机时针以及没有旋转。默认值是clock也就是顺时针变旋转变补间。
										<br>3.callback
										可选。设置当前图标变换动画结束后的回调。
									</g></span></li>
							<li><a href="https://snapsvg.io/">Snap.svg</a></li>
							<li><a href="https://www.zhangxinxu.com/GitHub/demo-Snap.svg/demo/basic/">Snap API</a></li>
						</ul>
					</div>
				</li>
			</ul>
			<ul>
				<li>
					<h3>CANVAS<span>-</span></h3>
					<div>
						<h4>[<span>-</span>]核心</h4>
						<ul>
							<li><a href="#">getContext("2d")</a><span></span></li>
							<li><a href="#">createEvent()</a><span></span></li>
							<li><a href="#">toDataURL()</a><span></span></li>
							<li><a href="#">save()</a><span>保存当前环境的状态。</span></li>
							<li><a href="#">restore()</a><span>返回之前保存过的路径状态和属性。</span></li>
						</ul>
						<h4>[<span>-</span>]图像</h4>
						<ul>
							<li><a href="#">drawImage</a>(image,x,y)<span><a
										href="https://www.w3cschool.cc/tags/canvas-drawimage.html">参考资料</a>
									<br>在画布上定位图像：
									<br>JavaScript 语法： context.drawImage(img,x,y);
									<br>在画布上定位图像，并规定图像的宽度和高度：
									<br>JavaScript 语法： context.drawImage(img,x,y,width,height);
									<br>剪切图像，并在画布上定位被剪切的部分：
									<br>JavaScript 语法： context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
									<textarea name="" id="" cols="60" rows="10">var c=document.getElementById("myCanvas");
							var ctx=c.getContext("2d");
							var img=document.getElementById("scream");
							ctx.drawImage(img,10,10);</textarea></span></li>
							<li><a href="#">width</a><span>返回 ImageData 对象的宽度。</span></li>
							<li><a href="#">height</a><span>返回 ImageData 对象的高度。</span></li>
							<li><a href="#">data</a><span>返回一个对象，其包含指定的 ImageData 对象的图像数据。</span></li>
							<li><a href="#">createImageData()</a><span>创建新的、空白的 ImageData 对象。</span></li>
							<li><a href="#">getImageData()</a><span>返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据。</span></li>
							<li><a href="#">putImageData()</a><span>把图像数据（从指定的 ImageData 对象）放回画布上。</span></li>
							<li><a href="#">globalAlpha</a><span>设置或返回绘图的当前 alpha 或透明值。</span></li>
							<li><a href="#">globalCompositeOperation</a><span>设置或返回新图像如何绘制到已有的图像上</span></li>
						</ul>
						<h4>[<span>-</span>]颜色样式阴影</h4>
						<ul>
							<li><a href="#">fillStyle</a>="col/gra/img"<span>设置fillStyle属性可以是CSS颜色，渐变，或图案</span></li>
							<li><a href="#">strokeStyle</a><span>设置或返回用于笔触的颜色、渐变或模式。</span></li>
							<li><a href="#">shadowColor</a><span>设置或返回用于阴影的颜色。</span></li>
							<li><a href="#">shadowBlur</a><span>设置或返回用于阴影的模糊级别。</span></li>
							<li><a href="#">shadowOffsetX</a><span>设置或返回阴影与形状的水平距离。</span></li>
							<li><a href="#">shadowOffsetY</a><span>设置或返回阴影与形状的垂直距离。</span></li>
							<li><a href="#">createLinearGradient</a>(x,y,x1,y1)<span>线条渐变</span></li>
							<li><a href="#">createRadialGradient</a>(x,y,r,x1,y1,r1)<span>径向/圆渐变</span></li>
							<li><a
									href="#">createRadialGradient()</a>t(x0,y0,r0,x1,y1,r1)<span>创建放射状/环形的渐变（用在画布内容上）。</span>
							</li>
							<li><a href="#">addColorStop()</a><span>指定颜色停止，参数使用坐标来描述，可以是0至1.</span></li>
							<li><a href="#">fillRect</a>(x,y,width,height)<span>fillRect(x,y,width,height)
									方法定义了矩形当前的填充方式。</span></li>
						</ul>
						<h4>[<span>-</span>]路径</h4>
						<ul>
							<li><a href="#">fill()</a><span>填充当前绘图（路径）。</span></li>
							<li><a href="#">stroke()</a><span>绘制已定义的路径。</span></li>
							<li><a href="#">beginPath()</a><span>起始一条路径，或重置当前路径。</span></li>
							<li><a href="#">moveTo()</a><span>把路径移动到画布中的指定点，不创建线条。</span></li>
							<li><a href="#">closePath()</a><span>创建从当前点回到起始点的路径。</span></li>
							<li><a href="#">lineTo()</a><span>添加一个新点，然后在画布中创建从该点到最后指定点的线条。</span></li>
							<li><a href="#">clip()</a><span>从原始画布剪切任意形状和尺寸的区域。</span></li>
							<li><a href="#">quadraticCurveTo()</a><span>创建二次贝塞尔曲线。</span></li>
							<li><a href="#">bezierCurveTo()</a><span>创建三次贝塞尔曲线。</span></li>
							<li><a href="#">arc()</a><span>创建弧/曲线（用于创建圆形或部分圆）。</span></li>
							<li><a href="#">arcTo()</a><span>创建两切线之间的弧/曲线。</span></li>
							<li><a href="#">isPointInPath()</a><span>如果指定的点位于当前路径中，则返回 true，否则返回 false。</span></li>
						</ul>
						<h4>[<span>-</span>]线条</h4>
						<ul>
							<li><a href="#">lineCap</a><span>设置或返回线条的结束端点样式。</span></li>
							<li><a href="#">lineJoin</a><span>设置或返回两条线相交时，所创建的拐角类型。</span></li>
							<li><a href="#">lineWidth</a><span>设置或返回当前的线条宽度。</span></li>
							<li><a href="#">miterLimit</a><span>设置或返回最大斜接长度。</span></li>
						</ul>
						<h4>[<span>-</span>]矩形</h4>
						<ul>
							<li><a href="#">rect()</a><span>创建矩形。</span></li>
							<li><a href="#">fillRect()</a><span>绘制"被填充"的矩形。</span></li>
							<li><a href="#">strokeRect()</a><span>绘制矩形（无填充）。</span></li>
							<li><a href="#">clearRect()</a><span>在给定的矩形内清除指定的像素。</span></li>
						</ul>
						<h4>[<span>-</span>]转换</h4>
						<ul>
							<li><a href="#">scale()</a><span>缩放当前绘图至更大或更小。</span></li>
							<li><a href="#">rotate()</a><span>旋转当前绘图。</span></li>
							<li><a href="#">translate()</a><span>重新映射画布上的 (0,0) 位置。</span></li>
							<li><a href="#">transform()</a><span>替换绘图的当前转换矩阵。</span></li>
							<li><a href="#">setTransform()</a><span>将当前转换重置为单位矩阵。然后运行 transform()。</span></li>
						</ul>
						<h4>[<span>-</span>]文字</h4>
						<ul>
							<li><a href="#">font</a><span>设置或返回文本内容的当前字体属性。 ctx.font="30px Arial";</span></li>
							<li><a href="#">textAlign</a><span>设置或返回文本内容的当前对齐方式。</span></li>
							<li><a href="#">textBaseline</a><span>设置或返回在绘制文本时使用的当前文本基线。</span></li>
							<li><a href="#">fillText</a>(text,x,y)<span>实心文本</span></li>
							<li><a href="#">strokeText</a>(text,x,y)<span>空心文本</span></li>
							<li><a href="#">measureText()</a><span>返回包含指定文本宽度的对象。</span></li>
						</ul>
					</div>
				</li>
			</ul>
			<ul>
				<li>
					<h3>WEB存储<span>-</span></h3>
					<div>
						<h4>[<span>-</span>]Storage</h4>
						<ul>
							<li><a href="#">localStorage</a><span>本地永久<br>
									<textarea name="" id="" cols="60" rows="10">								if(window.localStorage){
								//some
								}else{
								alert('不支持')
								}
							</textarea>
								</span></li>
							<li><a href="#">sessionStorage</a><span>本地临时<br>
									<textarea name="" id="" cols="60" rows="10">								if(window.sessionStorage){
								//some
								}else{
								alert('不支持')
								}
							</textarea>
								</span></li>
							<li><a href="#"></a>local vs session<span>
									session与local的区别：<br>
									寿命：session数据保存在所在窗口或标签页关闭时(刷新时可以存储)<br>
									共享：session值在本窗口或标签页可见,local可被同源的每个窗口或标签共享<br>
									storage与cookie的区别：<br>
									只要网页上同源（规则,主机,端口一致）,不需在同一个页面即可读取，不需要传递<br>
									同一页面后续多次加载也可以读取。
								</span></li>
							<li><a href="#">setItem</a>(key,val)<span>设置值：<br>
									sessionStorage.setItem('key','val');<br>
									sessionStorage.key = 'val';<br>
									sessionStorage['key'] = 'val';<br>
								</span></li>
							<li><a href="#">getItem</a>(key)<span>获取值：<br>
									sessionStorage.getItem('key');<br>
									sessionStorage.key ; <br>
									sessionStorage['key'];<br>
									如果用户关闭了存储或存储已达到最大容量将抛出QUOTA_EXCEEDED_ERR错误
								</span></li>
							<li><a href="#">removeItem</a>(key)<span>删除值<br>
									删除数据不返回被删除数据</span></li>
							<li><a href="#">clear()</a><span>清空所有值</span></li>
							<li><a href="#">length</a><span>键值对数量</span></li>
							<li><a href="#">key</a>(index)<span>获取一个指定位置的键</span></li>
							<li><a href="#">storage</a>(event)<span>
									window.addEventListener('storage',fn[e],true) 添加事件监听
									<br>storage事件对象属性
									<br>.key 包含了被更新或删除的键
									<br>.oldValue 包含了更新前键对应的数据,新添加数据null
									<br>.newValue 包含了更新后的数据,删除数据null
									<br>.url 事件发生的源
									<br>.storageArea 引用,指向值发生改变的localStorage或sessionStorage
								</span></li>
							<li><a href="#"></a><span></span></li>
							<li><a href="#"></a><span></span></li>
							<li><a href="#"></a><span></span></li>
							<li><a href="#"></a><span></span></li>
							<li><a href="#"></a><span></span></li>
							<li><a href="#"></a><span></span></li>
							<li><a href="#"></a><span></span></li>
						</ul>
						<h4>[<span>-</span>]Manifest</h4>
						<ul>
							<li><a href="#">创建方式</a><span>html manifest="demo.appcache"</span></li>
						</ul>
						<h4>[<span>-</span>]IndexDB</h4>
						<ul>
							<li><a href="#">window.openDatabase</a>('sqlname')<span>返回database对象</span></li>
							<li><a href="#">transaction.executesql()</a><span></span></li>
							<li><a href="#">executeSQL()</a><span>创建数据表</span></li>
							<li><a href="#"></a><span></span></li>
							<li><a href="#"></a><span></span></li>
							<li><a href="#"></a><span></span></li>
						</ul>
					</div>
				</li>
				<li>
					<h3>地理定位<span>-</span></h3>
					<div>
						<h4>[<span>-</span>]Geolocation</h4>
						<ul>
							<li><a href="#">position.coords.latitude</a> (纬度)</li>
							<li><a href="#">position.coords.longitude</a> (经度)</li>
							<li><a href="#">getCurrentPosition()</a><span><a
										href="https://www.w3cschool.cc/html/html5-geolocation.html"></a></span>参考资料</li>
							<li><a href="https://developer.baidu.com/map/index.php?title=open/library">百度地图</a></li>
						</ul>
					</div>
				</li>
			</ul>
			<ul>
				<li>
					<h3>媒体<span>-</span></h3>
					<div>
						<h4>[<span>-</span>]多媒体</h4>
						<ul>
							<li><a href="#">onabort</a><span>终止加载</span></li>
							<li><a href="#">onerror</a><span>数据加载错误</span></li>
							<li><a href="#">oncanplay</a><span>开始播放</span></li>
							<li><a href="#">onplay</a><span>开始播放</span></li>
							<li><a href="#">onpause</a><span>暂停</span></li>
							<li><a href="#">onended</a><span>播放结束</span></li>
							<li><a href="#">onloadeddata</a><span>当前帧</span></li>
							<li><a href="#">onloadedmetadata</a><span>指定元数据加载后触发</span></li>
							<li><a href="#">oncanplaythrough</a><span>正常播放且无需停顿和缓冲时</span></li>
							<li><a href="#">ondurationchange</a><span>时长发生变化</span></li>
							<li><a href="#">onemptied</a><span>当前列表为空</span></li>
							<li><a href="#">onloadstart</a><span>浏览器开始寻找指定视频/音频（audio/video）触发</span></li>
							<li><a href="#">onplaying</a><span>暂停或者在缓冲后准备重新开始播放时触发</span></li>
							<li><a href="#">onprogress</a><span>在浏览器下载指定的视频/音频（audio/video）时触发</span></li>
							<li><a href="#">onratechange</a><span>播放速度发送改变时触发</span></li>
							<li><a href="#">onseeked</a><span>重新定位视频/音频（audio/video）的播放位置后触发</span></li>
							<li><a href="#">onseeking</a><span>开始重新定位视频/音频（audio/video）时触发</span></li>
							<li><a href="#">onstalled</a><span>事件在浏览器获取媒体数据，但媒体数据不可用时触发。</span></li>
							<li><a href="#">onsuspend</a><span>事件在浏览器读取媒体数据中止时触发。</span></li>
							<li><a href="#">ontimeupdate</a><span>事件在当前的播放位置发送改变时触发。</span></li>
							<li><a href="#">onvolumechange</a><span>件在音量发生改变时触发。 </span></li>
							<li><a href="#">onwaiting</a><span>事件在视频由于要播放下一帧而需要缓冲时触发。</span></li>
						</ul>
					</div>
				</li>
				<li>
					<h3>拖放<span>-</span></h3>
					<div>
						<h4>[<span>-</span>]拖放</h4>
						<ul>

						</ul>
					</div>
				</li>
			</ul>
			<ul>
				<li>
					<h3>优化<span>+</span></h3>
					<div style="display:none">
						<h4>[<span>-</span>]网站优化</h4>
						<ul>
							<li><a href="#">减少HTTP请求</a><span>合并文件,雪碧图,BASE64,合并CSS/JS等</span></li>
							<li><a href="#">CDN内容分发网络</a></li>
							<li><a
									href="https://www.cnblogs.com/yuyii/archive/2008/10/16/1312238.html">添加Expire/Cache-Control头</a>
							</li>
							<li><a href="#">Gzip压缩</a></li>
							<li><a href="#">将CSS放在顶部</a></li>
							<li><a href="#">将script放在页面底部</a></li>
							<li><a href="#">避免在CSS中使用表达式</a></li>
							<li><a href="#">将CSS/JS文件外置</a></li>
							<li><a href="#">减少DNS查询</a><span>
									提前DNS查找<input type="text" style="width:480px"
										value="&lt;link rel=&quot;dns-prefetch&quot; href="
										www.domain1.com?'="">'&gt;</span></li>
							<li><a href="#">精简CSS/JS</a></li>
							<li><a href="#">避免重定向</a></li>
							<li><a href="#">移除重复的脚本</a></li>
							<li><a href="#">配置ETag</a></li>
							<li><a href="#">使用Ajax缓存</a></li>
						</ul>
						<h4>[<span>-</span>]扩展阅读</h4>
						<ul>
							<li><a href="#"></a><span></span></li>
							<li><a href="#"></a><span></span></li>
							<li><a href="#"></a><span></span></li>
							<li><a href="#"></a><span></span></li>
							<li><a href="#"></a><span></span></li>
						</ul>
					</div>
				</li>
				<li>
					<h3>工具<span>+</span></h3>
					<div style="display:none">
						<h4>[<span>-</span>]接口</h4>
						<ul>
							<li><a href="https://tongji.baidu.com/web/welcome/login">百度统计</a></li>
							<li><a href="https://shang.qq.com/v3/widget.html">QQ(群)推广</a></li>
							<li><a href="https://mp.weixin.qq.com/">微信公众平台</a></li>
							<li><a href="https://open.weibo.com/developers">新浪微博开放平台</a></li>
							<li><a href="https://dev.open.t.qq.com/websites/">腾讯微博开放平台</a></li>
							<li><a href="https://www.dnspod.cn/Domain">DNSPOD</a></li>
						</ul>
						<h4>[<span>-</span>]其他</h4>
						<ul>
							<li><a href="https://top.baidu.com/index.php">百度搜索风云榜</a></li>
							<li><a href="https://www.sojump.com/">问卷星</a></li>
							<li><a href="https://share.baidu.com/">百度分享</a></li>
							<li><a href="https://www.wumii.com/widget/relatedItems.htm">无觅关联</a></li>
							<li><a href="https://exmail.qq.com/login">腾讯企业邮箱</a></li>
						</ul>
					</div>
				</li>
			</ul>
		</div>

		<div id="RegEXP" class="content" style="display:none">
			<div class="exp_info">
				<b>字符类：单个字符和数字</b>

				<table width="100%" border="1" cellspacing="0" cellpadding="2">
					<tbody>
						<tr>
							<td valign="top">
								元字符/元符号</td>
							<td valign="top">
								匹配情况</td>
						</tr>
						<tr>
							<td valign="top">
								<b>.</b></td>
							<td valign="top">
								匹配除换行符外的任意字符</td>
						</tr>
						<tr>
							<td valign="top">
								<b>\d</b></td>
							<td valign="top">
								匹配数字，等价[0-9]</td>
						</tr>
						<tr>
							<td valign="top">
								<b>\D</b></td>
							<td valign="top">
								匹配非数字，同[^0-9]相同</td>
						</tr>
						<tr>
							<td valign="top">
								<b>\w</b></td>
							<td valign="top">
								匹配字母和数字及_，等价[0-9a-zA-Z_]</td>
						</tr>
						<tr>
							<td valign="top">
								\W</td>
							<td valign="top">
								匹配非字母和数字及_</td>
						</tr>
						<tr>
							<td valign="top">
								<b>\s</b></td>
							<td valign="top">
								匹配空白字符、空格、制表符和换行符</td>
						</tr>
						<tr>
							<td valign="top">
								\S</td>
							<td valign="top">
								匹配非空白字符</td>
						</tr>
						<tr>
							<td valign="top">
								\n</td>
							<td valign="top">
								匹配换行符</td>
						</tr>
						<tr>
							<td valign="top">
								\r</td>
							<td valign="top">
								匹配回车字符</td>
						</tr>
						<tr>
							<td valign="top">
								\t</td>
							<td valign="top">
								匹配制表符</td>
						</tr>
						<tr>
							<td valign="top">\v</td>
							<td valign="top">
								查找垂直制表符。</td>
						</tr>
						<tr>
							<td valign="top">
								\f</td>
							<td valign="top">
								匹配换页字符</td>
						</tr>
						<tr>
							<td valign="top">
								\0</td>
							<td valign="top">
								匹配 null 字符</td>
						</tr>
						<tr>
							<td valign="top">\xxx</td>
							<td valign="top">
								查找以八进制数 xxx 规定的字符。</td>
						</tr>
						<tr>
							<td valign="top">\xdd</td>
							<td valign="top">
								查找以十六进制数 dd 规定的字符。</td>
						</tr>
						<tr>
							<td valign="top">\uxxxx</td>
							<td valign="top">
								查找以十六进制数 xxxx 规定的 Unicode 字符。</td>
						</tr>
					</tbody>
				</table>
				&nbsp;

				<b>字符类：锚字符</b>

				<table width="100%" border="1" cellspacing="0" cellpadding="2">
					<tbody>
						<tr>
							<td valign="top">
								元字符/元符号</td>
							<td valign="top">
								匹配情况</td>
						</tr>
						<tr>
							<td valign="top">
								<b>^</b></td>
							<td valign="top">
								行首匹配<b>（不在方括号内）</b></td>
						</tr>
						<tr>
							<td valign="top">
								<b>$</b></td>
							<td valign="top">
								行尾匹配</td>
						</tr>
						<tr>
							<td valign="top">
								\A</td>
							<td valign="top">
								只有匹配字符串开始处</td>
						</tr>
						<tr>
							<td valign="top">
								\b</td>
							<td valign="top">
								匹配空格字符，单词边界，词在[]内时无效</td>
						</tr>
						<tr>
							<td valign="top">
								\B</td>
							<td valign="top">
								匹配非单词边界</td>
						</tr>
						<tr>
							<td valign="top">
								\G</td>
							<td valign="top">
								匹配当前搜索的开始位置</td>
						</tr>
						<tr>
							<td valign="top">
								\Z</td>
							<td valign="top">
								匹配字符串结束处或行尾</td>
						</tr>
						<tr>
							<td valign="top">
								\z&nbsp;</td>
							<td valign="top">
								只匹配字符串结束处</td>
						</tr>
					</tbody>
				</table>
				&nbsp;

				<b>字符类：量词</b>

				<table width="100%" border="1" cellspacing="0" cellpadding="2">
					<tbody>
						<tr>
							<td valign="top">
								元字符/元符号</td>
							<td valign="top">
								匹配情况</td>
						</tr>
						<tr>
							<td valign="top">
								x<b>?</b></td>
							<td valign="top">
								匹配 0 个或 1 个 x &nbsp;&nbsp;<b>(0或1)</b></td>
						</tr>
						<tr>
							<td valign="top">
								x<b>+</b></td>
							<td valign="top">
								匹配至少一个 x&nbsp;<b>(&gt;=1)</b></td>
						</tr>
						<tr>
							<td valign="top">x<b>*</b></td>
							<td valign="top">
								匹配 0 个或任意多个 x&nbsp;<b>(&gt;=0)</b></td>
						</tr>
						<tr>
							<td valign="top">x<b>{N}</b></td>
							<td valign="top">
								匹配包含 n 个 x 的序列的字符串。<b>(N个)</b></td>
						</tr>
						<tr>
							<td valign="top">x<b>{N,M}</b></td>
							<td valign="top">
								匹配包含 n~ m个x 的序列的字符串。<b>（N~M个）</b></td>
						</tr>
						<tr>
							<td valign="top">x{N,} &nbsp;x{,M}</td>
							<td valign="top">
								匹配包含至少n 个x 的序列的字符串。<b>（N个以上）(M个以下)</b></td>
						</tr>
					</tbody>
				</table>
				&nbsp;

				<b>表达式：[]</b>方括号用于查找某个范围内的字符

				<table width="100%" border="1" cellspacing="0" cellpadding="2">
					<tbody>
						<tr>
							<td valign="top">[abc]</td>
							<td valign="top">
								查找方括号之间的任何字符。</td>
						</tr>
						<tr>
							<td valign="top">[^abc]</td>
							<td valign="top">
								查找任何不在方括号之间的字符</td>
						</tr>
						<tr>
							<td valign="top">[0-9][a-z][A-Z][A-z]</td>
							<td valign="top">数字/小写字母/大写字母/全部字母</td>
						</tr>
					</tbody>
				</table>
				&nbsp;

				<b>分组：()</b>&nbsp;&nbsp;<strong>|</strong>

				<table width="100%" border="1" cellspacing="0" cellpadding="2">
					<tbody>
						<tr>
							<td valign="top">&nbsp;/(google){4,8}/</td>
							<td valign="top">&nbsp;</td>
						</tr>
						<tr>
							<td valign="top">\1 或$1
							</td>
							<td valign="top">
								匹配第一个分组中的内容</td>
						</tr>
						<tr>
							<td valign="top">
								\2 或$2</td>
							<td valign="top">
								匹配第二个分组中的内容</td>
						</tr>
						<tr>
							<td valign="top">
								\3 或$3&nbsp;</td>
							<td valign="top">
								匹配第三个分组中的内容</td>
						</tr>
						<tr>
							<td valign="top">RegExp.$1</td>
							<td valign="top">得到第一个分组里的字符串内容 （在此之前必须要运行一次）</td>
						</tr>
						<tr>
							<td valign="top">
								(red<b>|</b>blue<b>|</b>green)</td>
							<td valign="top">
								查找任何指定的选项。<b>|需要放在分组中</b></td>
						</tr>
					</tbody>
				</table>
				&nbsp;

				<b>replacement</b>&nbsp;中的 $ 字符具有特定的含义。如下表所示，它说明从模式匹配得到的字符串将用于替换。

				<table width="100%" border="1" cellspacing="0" cellpadding="2">
					<tbody>
						<tr>
							<td valign="top">
								$1、$2、...、$99</td>
							<td valign="top">
								与 regexp 中的第 1 到第 99 个子表达式相匹配的文本。</td>
						</tr>
						<tr>
							<td valign="top">
								$&amp;</td>
							<td valign="top">
								与 regexp 相匹配的子串。</td>
						</tr>
						<tr>
							<td valign="top">
								$`</td>
							<td valign="top">
								位于匹配子串左侧的文本。</td>
						</tr>
						<tr>
							<td valign="top">
								$'</td>
							<td valign="top">
								位于匹配子串右侧的文本。</td>
						</tr>
						<tr>
							<td valign="top">
								$$</td>
							<td valign="top">
								直接量符号。</td>
						</tr>
					</tbody>
				</table>

				<b>贪婪与惰性</b>

				<table width="100%" border="1" cellspacing="0" cellpadding="2">
					<tbody>
						<tr>
							<td valign="top">
								贪 婪</td>
							<td valign="top">
								&nbsp;惰 性</td>
						</tr>
						<tr>
							<td valign="top">
								+</td>
							<td valign="top">
								+?</td>
						</tr>
						<tr>
							<td valign="top">
								?</td>
							<td valign="top">
								??</td>
						</tr>
						<tr>
							<td valign="top">
								*</td>
							<td valign="top">
								*?</td>
						</tr>
						<tr>
							<td valign="top">
								{n}</td>
							<td valign="top">
								{n}?</td>
						</tr>
						<tr>
							<td valign="top">
								{n,}</td>
							<td valign="top">
								{n,}?</td>
						</tr>
						<tr>
							<td valign="top">
								{n,m}</td>
							<td valign="top">
								{n,m}?</td>
						</tr>
					</tbody>
				</table>
				&nbsp;
				<b>分组捕获</b>

				<table width="100%" border="1" cellspacing="0" cellpadding="2">
					<tbody>
						<tr>
							<td valign="top">
								?:&nbsp;</td>
							<td valign="top">
								非捕获分组前 (a)(?:b)</td>
						</tr>
						<tr>
							<td valign="top">?=</td>
							<td valign="top">前瞻捕获&nbsp;(a)(?=b) 返回的是a不是ab，紧跟b的a</td>
						</tr>
						<tr>
							<td valign="top">
								?!</td>
							<td valign="top">
								(a)(?!b)匹配任何其后没有紧接指定字符串 b 的字符串，不紧跟b的a</td>
						</tr>
					</tbody>
				</table>
			</div> &nbsp;

			<div style="float:left;width:380px;margin-left:20px;border-radius:4px;display:none">
				<h3>常用正则表达式<span>-</span></h3>
				<div>
					<h4></h4>
					<ul>
						<li><a href="#"></a></li>
						<li><a href="#"></a></li>
					</ul>
				</div>
			</div>
        </div>
        
        <div id="gitCommand" class="content" style="display:none">
            <div class="gitCommand"> 
                <div class="north">
                    <div class="git-northLeft">
                        <label>Git 常用命令速查表</label>
                    </div>
                    <div class="northRigth">
                        <div class="nr">
                            <div class="nrName">master</div><div class="nrTip">：默认开发分支</div>
                            <div class="nrName">origin</div><div class="nrTip">：默认远程版本库</div>
                        </div>
                        <div class="nr">
                            <div class="nrName">Head</div><div class="nrTip">：默认开发分支</div>
                            <div class="nrName">Head^</div><div class="nrTip">：Head的父提交</div>
                        </div>
                    </div>
                </div>
                
                <div><img src="./git指令_files/line.png" class="line"></div>
                
                <div class="git-center">
                    <div class="center-vertical">
                        
                        <div class="categary">
                            <div class="git-title">
                                <div>创建版本库</div>
                            </div>
                            <div class="orders">
                                <div>
                                    <div class="order">$ git clone &lt;url&gt;</div>
                                    <div class="tip">#克隆远程版本库</div>
                                </div>					
                                <div>
                                    <div class="order">$ git init</div>
                                    <div class="tip">#初始化本地版本库</div>
                                </div>
                            </div>
                                            
                        </div>
                        
                        <div class="categary">
                            <div class="git-title">
                                <div>修改和提交</div>
                            </div>
                            <div class="orders">
                                <div>
                                    <div class="order">$ git status</div>
                                    <div class="tip">#查看状态</div>
                                </div>
                                <div>
                                    <div class="order">$ git diff</div>
                                    <div class="tip">#查看变更内容</div>
                                </div>
                                <div>
                                    <div class="order">$ git add .</div>
                                    <div class="tip">#跟踪所有改动过的文件</div>
                                </div>
                                <div>
                                    <div class="order">$ git add &lt;file&gt;</div>
                                    <div class="tip">#跟踪指定的文件</div>
                                </div>
                                <div>
                                    <div class="order">$ git mv &lt;old&gt; &lt;new&gt;</div>
                                    <div class="tip">#文件改名</div>
                                </div>
                                <div>
                                    <div class="order">$ git rm &lt;file&gt;</div>
                                    <div class="tip">#删除文件</div>
                                </div>
                                <div>
                                    <div class="order">$ git rm --cached &lt;file&gt;</div>
                                    <div class="tip">#停止跟踪文件但不删除</div>
                                </div>
                                <div>
                                    <div class="order">$ git commit -m "message"</div>
                                    <div class="tip">#提交所有更新过的文件</div>
                                </div>
                                <div>
                                    <div class="order">$ git commit --amend</div>
                                    <div class="tip">#修改最后一次提交</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="categary">
                            <div class="git-title">
                                <div>查看提交历史</div>
                            </div>
                            <div class="orders">
                                <div>
                                    <div class="order">$ git log</div>
                                    <div class="tip">#查看提交历史</div>
                                </div>
                                <div>
                                    <div class="order">$ git log &lt;branch&gt;</div>
                                    <div class="tip">#查看指定分支提交历史</div>
                                </div>
                                <div>
                                    <div class="order">$ git log -p &lt;file&gt;</div>
                                    <div class="tip">#查看指定文件的提交历史</div>
                                </div>
                                <div>
                                    <div class="order">$ git blame &lt;file&gt;</div>
                                    <div class="tip">#以列表方式查看指定文件</div>
                                </div>
                                <div>
                                    <div class="order">$ git log -&lt;number&gt;</div>
                                    <div class="tip">#查看最近N条提交历史</div>
                                </div>
                                <div>
                                    <div class="order-line2">$  git log --name-status</div>
                                    <div class="tip-line2">#查看提交历史和提交的文件</div>
                                </div>
                                <div>
                                    <div class="order">$ git log --pretty=oneline</div>
                                    <div class="tip">#hash、备注一行显示</div>
                                </div>
                                <div>
                                    <div class="order">$ git log --oneline</div>
                                    <div class="tip">#hash、备注一行显示</div>
                                </div>
                                <div>
                                    <div class="order">$ git log --pretty=short</div>
                                    <div class="tip">#hash、tag、作者、备注</div>
                                </div>		
                            </div>
                        </div>
                        
                        <div class="categary">
                            <div class="git-title">
                                <div>撤销</div>
                            </div>
                            <div class="orders">
                                <div>
                                    <div class="order-line2">$ git reset --hard HEAD</div>
                                    <div class="tip-line2">#撤销工作目录中所有未提交文件的修改内容</div>
                                </div>
                                <div>
                                    <div class="order-line2">$ git checkout HEAD &lt;file&gt;</div>
                                    <div class="tip-line2">#撤销指定的未提交文件的修改内容</div>
                                </div>
                                <div>
                                    <div class="order">$ git revert -&lt;commit&gt;</div>
                                    <div class="tip">#撤销指定的提交</div>
                                </div>
                                <div>
                                    <div class="order">$ git clean -f</div>
                                    <div class="tip">#删除untracked files</div>
                                </div>
                                <div>
                                    <div class="order-line2">$ git clean -fd</div>
                                    <div class="tip-line2">#连untracked的目录也一起删掉</div>
                                </div>
                                <div>
                                    <div class="order-line3">$ git clean -xfd</div>
                                    <div class="tip-line3">#连gitignore的untracked文件/目录也一起删掉(慎用)</div>
                                </div>
                                <div>
                                    <div class="order-line2">$ git clean -nf</div>
                                    <div class="tip-line2">#查看将会删除哪些文件，另外两条命令同理</div>
                                </div>
                            </div>
                        </div>
                        
                        
                    </div>
                    
                    
                    <div class="center-vertical">
                    
                        
                        
                        <div class="categary">
                            <div class="git-title">
                                <div>分支</div>
                            </div>
                            <div class="orders">
                                <div>
                                    <div class="order">$ git branch </div>
                                    <div class="tip">#显示所有本地分支</div>
                                </div>
                                <div>
                                    <div class="order-line2">$ git branch -a</div>
                                    <div class="tip-line2">#显示所有本地和远程分支</div>
                                </div>
                                <div>
                                    <div class="order">$ git branch -v</div>
                                    <div class="tip">#查看分支最后一次提交</div>
                                </div>
                                <div>
                                    <div class="order">$ git branch &lt;new-branch&gt;</div>
                                    <div class="tip">#创建新分支</div>
                                </div>
                                <div>
                                    <div class="order">$ git checkout &lt;branch/tag&gt;</div>
                                    <div class="tip">#切换到指定分支或标签</div>
                                </div>
                                <div>
                                    <div class="order">$ git branch -b &lt;branch&gt;</div>
                                    <div class="tip">#新建+切换到指定分支</div>
                                </div>
                                <div>
                                    <div class="order" style="width:100%">$ git push &lt;remoteName&gt; &lt;branchName&gt;</div>
                                    <div class="tip" style="float:left;margin-left:252px;">#推送本地分支到远程仓库</div>
                                </div>
                                <div>
                                    <div class="order-line2" style="width:100%">$ git checkout -b &lt;branchName&gt; &lt;remoteName&gt;/&lt;remoteBranchName&gt; </div>
                                    <div class="tip" style="float:left;margin-left:252px;">#拉取远程指定分支到本地</div>
                                </div>
                                <div>
                                    <div class="order">$ git branch -d &lt;branch&gt;</div>
                                    <div class="tip">#删除本地分支</div>
                                </div>
                                <div>
                                    <div class="order" style="width:100%">$ git push origin --delete &lt;branch&gt;</div>
                                    <div class="tip" style="float:left;margin-left:252px;">#删除远程分支</div>
                                </div>					
                            </div>
                        </div>
                        
            
                        <div class="categary">
                            <div class="git-title">
                                <div>标签</div>
                            </div>
                            <div class="orders">
                                <div>
                                    <div class="order">$ git tag </div>
                                    <div class="tip">#列出所有本地标签</div>
                                </div>
                                <div>
                                    <div class="order">$ git tag &lt;tag&gt;</div>
                                    <div class="tip">#基于最新提交创建标签</div>
                                </div>	
                                <div>
                                    <div class="order">$ git tag &lt;tag&gt; &lt;commit&gt;</div>
                                    <div class="tip">#在某个commit上打标签</div>
                                </div>	
                                <div>
                                    <div class="order-line2">$ git push origin &lt;tag&gt;</div>
                                    <div class="tip-line2">#本地tag推送到origin线上</div>
                                </div>	
                                <div>
                                    <div class="order">$ git tag -d &lt;tag&gt;</div>
                                    <div class="tip">#删除标签</div>
                                </div>	
                                <div>
                                    <div class="order" style="width:100%">$ git push origin :refs/tags/&lt;tag&gt;</div>
                                    <div class="tip" style="float:left;margin-left:252px;">#删除本地标签后删除线上标签</div>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                    
                    
                    <div class="center-vertical">
                    
                        <div class="categary">
                            <div class="git-title">
                                <div>合并与衍合</div>
                            </div>
                            <div class="orders">
                                <div>
                                    <div class="order-line2">$ git merge &lt;branch&gt;</div>
                                    <div class="tip-line2">#合并指定分支到当前分支</div>
                                </div>
                                <div>
                                    <div class="order-line2">$ git rebase &lt;branch/tag&gt;</div>
                                    <div class="tip-line2">#衍合指定分支到当前分支</div>
                                </div>
                                <div>
                                    <div class="order-line2">$ git branch --merged</div>
                                    <div class="tip-line2">#查看哪些分支已经合并到当前分支</div>
                                </div>
                                <div>
                                    <div class="order-line2">$ git branch --no-merged</div>
                                    <div class="tip-line2">#查看哪些分支没合并到当前分支</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="categary">
                            <div class="git-title">
                                <div>远程操作</div>
                            </div>
                            <div class="orders">
                                <div>
                                    <div class="order">$ git remote -v</div>
                                    <div class="tip">#查看远程版本库信息</div>
                                </div>
                                <div>
                                    <div class="order-line2">$ git remote -show &lt;remote&gt;</div>
                                    <div class="tip-line2">#查看远程指定版本库信息</div>
                                </div>
                                <div>
                                    <div class="order-line2">$ git ls-remote</div>
                                    <div class="tip-line2">#查看远程分支和标签信息</div>
                                </div>
                                <div>
                                    <div class="order" style="width:100%">$ git remote add &lt;remote&gt; &lt;url&gt;</div>
                                    <div class="tip" style="float:left;margin-left:252px;">#添加远程版本库</div>
                                </div>
                                <div>
                                    <div class="order" style="width:100%">$ git checkout -b &lt;branchAlias&gt; origin/&lt;branch&gt;</div>
                                    <div class="tip" style="float:left;margin-left:252px;">#拉取远程指定分支到本地</div>
                                </div>
                                <div>
                                    <div class="order">$ git fetch &lt;remote&gt;</div>
                                    <div class="tip">#从远程库获取代码</div>
                                </div>
                                <div>
                                    <div class="order">$ git pull &lt;remote&gt; &lt;branch&gt;</div>
                                    <div class="tip">#下载代码及快速合并</div>
                                </div>
                                <div>
                                    <div class="order" style="width:100%">$ git push &lt;remote&gt; &lt;branch&gt;</div>
                                    <div class="tip" style="float:left;margin-left:252px;">#上传代码及快速合并</div>
                                </div>
                                <div>
                                    <div class="order">$ git remote rm &lt;remote&gt;</div>
                                    <div class="tip">#删除远程仓库</div>
                                </div>
                                <div>
                                    <div class="order" style="width:100%">$ git push &lt;remote&gt;:&lt;branch/tag-name&gt;</div>
                                    <div class="tip" style="float:left;margin-left:252px;">#删除远程标签</div>
                                </div>
                                <div>
                                    <div class="order">$ git push --tags</div>
                                    <div class="tip">#上传所有标签</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
		</div>
	</div>
</body>
<script src="../../lib/jquery/jquery.min.js"></script>
<script src="../../lib/jquery/jquery-ui.js"></script>
<script src="./rainbow.min.js"></script>
<script src="./index.js"></script>
</html>